React Router4.1

基本ルーティング構成

<Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
</Router>

すなわち
URL
コンポーネント
/
App
/about
App -> About
/inbox
App -> Inbox
/inbox/messages/:id
App -> Inbox -> Messages

ルーティングマッチングの原理

ルーティングには、「1つのURLに一致するかどうか」を決定する3つの属性があります.

ネスト関係と

そのパス構文

優先度

ネストされた関係

指定されたURLが呼び出されると、セット全体(ヒットした部分)がレンダリングされます.ネストされたルーティングは、ツリー構造として記述される.React Routerは、指定されたURLに一致するルーティングを探すために、ルーティング構成全体を優先的に巡回します.

パス構文

ルーティングパスは、URLの1つ(または一部)に一致する文字列モードです.ほとんどのルーティングパスは、以下のいくつかの特殊な記号を除いて、文字通りに直接理解できます.

:paramName–該当するセグメントは/、?または#の後のURL.ヒットした部分はパラメータ

として使用されます.

()–その内部のコンテンツはオプションとみなされます.

は、次の文字またはURL全体の末尾にヒットするまで任意の文字(欲張りではない)に一致し、splatパラメータ

を作成する.

優先度

最後に、ルーティングアルゴリズムは、定義された順序に従ってルーティングを上から下へマッチングします.したがって、2つの兄弟ルーティングノード構成を持っている場合は、前のルーティングが後のルーティングのパスに一致しないことを確認する必要があります.

デフォルトルーティング(IndexRoute)とIndexLink

デフォルトルーティング(IndexRoute)

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

ホームが最上位レベルのルーティングとして現れるとしても、IndexRouteによってデフォルトのルーティングが設定.

ジャンプ前の確認

React Routerは、routerWillLeaveライフサイクルフックを提供します.これにより、Reactコンポーネントは、発生しているジャンプをブロックしたり、routeを離れる前にrouterWillLeaveの戻り値をユーザーに提示したりすることができます.

return false今回のジャンプをキャンセル

returnはプロンプト情報を返し、routeを離れる前にユーザに確認を促す.

このフックはrouteコンポーネントにLifecycle mixinを導入して取り付けることができます

import { Lifecycle } from 'react-router'

const Home = React.createClass({

  //    Home     route   ，      
  // Lifecycle mixin       routerWillLeave   。
  mixins: [ Lifecycle ],

  routerWillLeave(nextLocation) {
    if (!this.state.isSaved)
      return 'Your work is not saved! Are you sure you want to leave?'
  },

  // ...

})

ルーティングライフサイクル

1.ユーザがアプリケーションの'/'ページを開くとき
コンポーネント
ライフサイクル
App
componentDidMount
Home
componentDidMount
Invoice
N/A
Account
N/A
2.ユーザが'/'から'/invoice/123'にジャンプすると
コンポーネント
ライフサイクル
App componentWillReceiveProps , componentDidUpdate
Home componentWillUnmount
Invoice componentDidMount
Account
N/A

Appはrouterから新しいprops(children、params、locationなどのデータ)を受信するので、AppはcomponentWillReceivePropsとcomponentDidUpdateの2つのライフサイクルメソッド

をトリガする.

Homeはレンダリングされないため、

が削除されます.

Invoiceは初めて3.ユーザが/invoice/123から/invoice/789

にジャンプすると
コンポーネント
ライフサイクル
App componentWillReceiveProps , componentDidUpdate
Home
N/A
Invoice componentWillReceiveProps , componentDidUpdate
Account
N/A
すべてのコンポーネントは以前にマウントされていたので、routerからpropsを更新しただけです.4./invoice/789から/accounts/123にジャンプすると
コンポーネント
ライフサイクル
App componentWillReceiveProps , componentDidUpdate
Home
N/A
Invoice componentWillUnmount
Account componentDidMount