React Router v5とv6 の違いに混乱した件

はじめに

僕が受講しているudemyでReact Routerを扱う場面があったのですが、少し情報が古くてv5でした。
でもまぁなんとなく書けるだろうーーと楽観的に捉えていた僕でしたが、5秒も経たないうちにエラーが出ました笑

同じような境遇の方がいましたら、参考までにしてください。

ルーティングの実装方法

単純なページ遷移をしたい場合

• 基本的な設定

ルートの設定

<Routes>
    <Route path = "パス" element={<"表示したいコンポーネント名"/>}/>
</Routes>

このルートの設定を使って、v5と同様にLinkコンポーネントを使えば、基本的な画面遷移を実装することが出来ます。

• ネストする画面遷移

ルートの設定

<Routes>
    <Route path="親パスの名前">
        <Route index element={}>
        <Route path="パスの名前(相対的な)" element={}>
        <Route path="パスの名前(相対的な)" element={}>
    </Route>
</Routes>

基本的な画面遷移に加えて、さらにネストした画面遷移を実装したい場合、上記のようなコードで可能になります！
indexを使うことで親のパスで表示したいコンポーネントを指定できます。そして同様にLinkを使用することによってネストされた画面遷移の完成です！

終わりに

今回の記事では、React Routerの本当に基礎の基礎の構文だけを載せてみました！僕がそのレベルしか扱えないので笑
今後React Routerを多用する場面やもっと高度なことをする必要が出てきたら再度学びなおそうと思います。Nextjsを使えばルーティングが楽になるということを耳にしたことがあるので、いつか触ってみたいです。

React Routerのことを調べていて思ったこと、

やはり公式ドキュメントが一番正しい!!!

英語ばっかだし読む気失せるけど、英語読もうとして挫折するくらい(自分)ならGoogle翻訳使って読んで見ようと思います。一読とはいかなくても、必要な部分だけでも。