React/ページ遷移のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
React/ページ遷移へ行く。
- 1 (2021-10-14 (木) 15:53:31)

React Router †

Reactのためのルーティングライブラリ
History APIとの連携や、ルーティングに応じたコンポーネントの描画を任せることができる

React Router ではルーティングをコンポーネントによって定義する
コンポーネントをネストすることで、ネストしたルーティングの定義も行える
子のルーティングは props.children に渡される。これにより、階層を持ったURLに対するルーティングが実現できる。

ページ遷移には、React Router が提供する Link や、browserHistory オブジェクトが持つ push メソッドを使用する

React Router は、ルーティングの状態に応じた処理が定義できるライフサイクルメソッドを持っている
- getComponent ... ルーティングに応じて必要なコンポーネントを非同期で読み込みたいときに使用
- onEnter ... 認可処理などの前処理をしてからコンポーネントを表示したい場合などに使用
- onChange
- onLeave

React Router はミドルウェアとしての仕組みも持っている
- react-router-scroll を使うことで、ページ遷移時のスクロールの位置の復元やカスタマイズが可能

↑

React Router ver.4 †

Ver.4 で仕様が結構変わっている！！

以前はreact-routerからimportする仕様だったが、v4はwebとnativeが分かれるようになった
- webの場合は react-router-dom
- nativeの場合は react-router-native
URL起因のパラメータ周りの呼び方変更 this.props.params -> this.props.match.params
Route定義がしれっと無名関数になってる

browserHistoryの取り扱い

ver.3

import { Router, Route, IndexRoute, IndexLink, browserHistory } from 'react-router';
        :
<Router history={browserHistory}>
   <Route path='/' component={App}>
     <IndexRoute component={Top} />
     <Route path='hoge' component={Hoge} />
   </Route>
 </Router>

ver.4

import { Route, BrowserRouter } from 'react-router-dom';
        :
<BrowserRouter>
   <div>
     <Route exact={true} path='/' component={Top}/>
     <Route path='hoge' component={Hoge}/>
   </div>
</BrowserRouter>

IndexRedirect?がなくなり、相対パスでなく絶対パス？

ver.3

<Route path="/one">
  <IndexRedirect to="1" />
  <Route path="1" component={First} />
  <Route path="2" component={Second} />
</Route>

ver.4

<Route path="/one">
  <Switch>
    <Route exact path="/one/1" component={First} />
    <Route exact path="/one/2" component={Second} />
    <Redirect to="/one/1" />  <== パスがマッチしなかった場合は最後に書くこと！
  </Switch>
</Route>

破壊的な変更もあるので、v3で作ったものを無理やり乗せかえるのはやめとけ！

マニュアル ... これをしっかり読んで対応すべし！
- React Router DOM
- React Router Native

ver.4 へのアップデート

$ npm un -S react-router && npm i -S react-router-dom

React/ページ遷移 のバックアップ(No.1)

React Router †

React Router ver.4 †

React/ページ遷移のバックアップ(No.1)