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を引数に指定
以上