React Routerで画面遷移をするときのメモ

 Reactで画面を切り替えるのに、React Routerが使えそうだったのでなんとくメモ。

 ざっくりとした感覚だと、URLのパスを条件として、呼び出すコンポーネントを切り替える感じ
 パスが切り替わったタイミングで、判定してくれるので、React Routerの用意するLinkやuseHistory()でするhistory.push()やhistory.replace()、あとはwindow.location.hrefなどでパスを操作することで、表示するコンポーネントを切り替えることができる。
 

[ドキュメント]

 　　https://reactrouter.com/

[インストール]　

　　$npm install react-router-dom

[ソース内での書き方]

1.  ルーティングをするソースでのインポート

import {
  BrowserRouter,
  Switch,
  Route
} from 'react-router-dom';


2.  ルーティングの定義
（記述例）
<BrowserRouter>
 <Switch>
   <Route exact path="/" component={Login}  />
   <Route exact path="/top" component={Top}  />
 </Switch>
</BrowserRouter>


   • BrowserRouter
     React Routerでコンポーネントを切り替える位置に配置する。
     BrowserRouterで切り替える子コンポーネント内でも再度切り替えるための記述可能。
     特にパラメータは不要。
     
     
   • Swtich
     BrowserRouterの子要素として切り替える条件を囲うために配置する。
     子要素としてRouteを配置する。
     
     
   • Route
     ルーティング条件を記述するために配置する。切り替える条件分配置する。
     パラメータとして、条件となるパスを定義するpathと条件に一致する際に呼び出すコンポーネントを定義するcomponentを設定する。
     pathだけだと部分一致になるので厳密な一致を条件とする場合はexactをパラメータとして追加する。path部分は正規表現やパスをパラメータとして受け取るための定義もできるのでいろいろと使えそう
     
     
3. URLパスの切り替え
URLのパスの切り替えは大まかに以下の３つ

   • React Routerが用意するLink
     import {Link} from 'react-router-dom';//インポート
     
     <Link to {path="/next/"}>次へ</Link>
     
     
   • React Routerが用意するhistoryの操作
     ※関数コンポーネントの場合はフックでuseHistory()を使える
     
     import {useHistory} from 'react-router-dom';//インポート
     
     let {history} = useHistory();
     const next =()=>{history.push("/")};//履歴が残る
     const back=()=>{history.replace("/")};//履歴が残らない
     
     
   • windowsオブジェクトのlocation.hrefの操作
     普通にwindows.location.href="/"としても操作できる