#author("2021-10-14T07:18:25+00:00","default:admin","admin")
#author("2021-10-14T07:20:26+00:00","default:admin","admin")
-[[React入門 ～React Router編～:https://zenn.dev/h_yoshikawa0724/articles/2020-09-22-react-router]]
-[[【React初心者】 #3 ルーティング・ページ遷移を作る！ react-router-dom:https://qiita.com/Bashi50/items/ce8aaeaa52f73ba971b9]]
-[[React Router - react-routerを使ってReact(リアクト)でページ遷移して見ましょう。:https://dev-yakuza.posstree.com/react/react-router/]]

-[[connected-react-routerでSPAの描画をURLで切り替える:https://tech.playground.style/javascript/connected-react-router/]]

-[[綺麗なReactコンポーネント設計でモノリシックなコンポーネントを爆殺する:https://qiita.com/teradonburi/items/6828635d2e70dba6637d]]
-[[Reactで使う有名なコンポーネントデザインパターン:https://qiita.com/ryokkkke/items/9768b7bb7e9a954a07b1]]

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

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

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

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

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

*React Router ver.4 [#u10d22bd]
-[[React Router v4の変更点:http://qiita.com/yutasuzuki/items/19d272e05669bafc926e]]
-[[react-router@v4対応したので雑に晒す:http://qiita.com/Jey/items/dae2074427547e63569b]]
-[[【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(how to update react-router3.x vs 4.x):http://kenjimorita.jp/react-router3-x%E2%86%924-x]]
-[[【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(props(history, location, match等)をRouteから渡したい！！):http://kenjimorita.jp/react-router3-x%E2%86%924-x_2/]]
-[[notes in migrating from React-Router-3 to React-Router-4:http://ezcook.de/2017/04/26/notes-in-migrating-from-React-Router-3-to-React-Router-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:https://reacttraining.com/react-router/web/guides/quick-start]]
--[[React Router Native:https://reacttraining.com/react-router/native/guides/quick-start]]

-ver.4 へのアップデート
 $ npm un -S react-router && npm i -S react-router-dom

*[[React Navigation:https://reactnavigation.org/]] [#r5eb6d5f]
-[[React Navigationで画面遷移を実現する:https://codezine.jp/article/detail/12150]]
-[[【ReactNative】+【Expo】+【ReactNavigation】でページ遷移を実装する:https://codezine.jp/article/detail/12150]]
-[[React NativeでReact Navigationを使用したルーティングの使用方法:https://www.digitalocean.com/community/tutorials/react-react-native-navigation-ja]]
-[[React-Navigatorを利用してみる（基礎編）:https://qiita.com/zaburo/items/5b69a65db1b4d181896a]]
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS