【React】react-router-domでハマった話

初めに

我、最近Reactを学んでいるので、勝手に議事録として記載する。
といっても大体ここら辺の記事は出ていると思うので、そのほかの方の記事を参考にしたほうがいいであろう。
完全に自己満である。

ハマったコード

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

/**省略**/

<BrowserRouter>
        <Link to="/">Home</Link><br/>
        <Link to="/page01">page01</Link><br/>
        <Link to="/page02">page02</Link><br/>

        <Switch>
          <Route exact path="/"><Home /></Route>

          <Route 
            path="/page01" 
            render={({match: {url}}) => (
              <Switch>
                <Route exact path={url}>
                  <Page01/>
                </Route>

                <Route exact path={`${url}/detailA`}>
                  <Page01DetailA/>
                </Route>

                <Route exact path={`${url}/detailB`}>
                  <Page01DetailB />
                </Route>
              </Switch>
          )} />

          <Route path="/page02"><Page02 /></Route>
        </Switch>
</BrowserRouter>

/**省略**/

まぁこういったrouter-domのパッケージを使ってReactでのルーティング勉強していたわけである。
ただ動いてくれない！！

ほなら大体「書き方が違う！！RoutesとかNavigate使え」とか「RouteはRoutesの中に絶対に入れなさい！」などそういった類のエラーが起きると思う。
大体そういったエラーが起きてHistoryやSwitchが使えないのである。

困ったもんだ。

原因

上記のコードのエラーを調べると、react-router-domのβ版であるv6が原因で、ハマったコードのような書き方は一新されて使えないらしい。。。
うーん、安易にNPMでパッケージをインストールしたのが裏目に出たなーといったところだ。

解決策

その１（v6の記法に慣れる）

今のうちからこのv6に親しんでおけば、後々やりやすくなるのではなかろうか？
v5ではexactを指定しなければならなかったりするので、いろいろ改善されているようである。
普通にこっちで対応したほうが有意義な気がする。
※単純に見やすいしね。

※上記参考にしてみてほしい。

その２（v5へバージョンを下げる）

npmでパッケージバージョン下げればいいのだ。
以下コマンドである。

npm i -S react-router-dom@5

まとめ

React学び始めの方は、ちょっと古い教材やサイトで学ぶとこのエラーに陥りやすいと思う。
我もその一人であったので、まぁ備忘録で書いておく。

※本業はフロントではござらん。。