More than 1 year has passed since last update.

【勉強めも】React Router

Posted at 2021-12-31

#BrowserRouter
React Routerを使うためのコンポーネント。
基本的にReact Routerを使う場合はBrowserRouterで囲ってあげる。

BrowserRouter

 <BrowserRouter>
  <Switch>
   <Router path="/" component="Home" />
   <Router path="/hoge" component="Hoge" />
  </Switch>
 </BrowserRouter>

※Switchコンポーネントはv6からRoutesコンポーネントに変更になったっぽい。
BrowserRouterのほかにもHashRouterというコンポーネントを使う方法もあるらしい。

両者の違いは以下とのこと。古いブラウザもサポートする場合は後者になりそう。
・BrowserRouterはHTML5のhistory APIを使用
・HashRouterはwindow.locationを使用

#Link

#Router

#Switch
v6ではなくなっているよう。
最初にマッチしたURLのみをレンダリングしてくれる。
Switchで囲わないときは一致したURLはすべてレンダリングされる。