Reactメモ ルーティングの設定 ＊個人メモ用

Reactの勉強をしている私の個人メモなので、
記事としてはわかりづらくなっています。
FBは歓迎しておりますが、温かい目で見守って頂けると幸いです。

react-routerとreact-router-domの違い

とりあえずreact-router-domを使えばOK

基本的な遷移

sample.jsx

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

    <BrowserRouter>
      <div className="App">
        <Link to="/">HOME</Link>
      </div>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </BrowserRouter>

①全てをBrowserRouterで囲む
②Linkで遷移させるためのボタンやlinkを作る
③遷移先をSwitchで囲む
④RouteのpathにLinkのパスを指定
⑤Routeで指定したパスに合う遷移先を囲む
⑥遷移先の元にはexactを指定

ネストされた遷移先

sample.jsx

        <Route
          path="/"
          render={({ match: { url } }) => (
            <Switch>
              <Route exact path={url}>
                <Home />
              </Route>
              <Route path={`${url}/sample1`}>
                <HomeSample1 />
              </Route>
              <Route path={`${url}/sample2`}>
                <HomeSample2 />
              </Route>
            </Switch>
          )}
        ></Route>

①1つのRouteの中でrenderを行う
②render内で同じことを行う
③確実にネストされた場所を指定するため
renderは関数を受け取りデフォルトの引数でpropsを持っているので
その中のmatchの中のurlを引数に指定

以上