状況
- Udemyの「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」のセクション5: ルーティングの基礎(React Router)の基本的なページ遷移のレクチャーで
react-router-domのバージョンの違いによるエラーが起きた - 具体的には
react-router-domのSwitchコンポーネントをimportしたときに画面が真っ白になった - 環境はStackBlitzを使用
-
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.2.0"を使用
参考記事
エラー対応
-
初めに参考記事を見ながら
react-router-domのバージョン5にインストールし直した -
Udemyの動画の冒頭でreactとreact-domのバージョンを17にするよう指示があったのでインストールし直した
-
しかし状況は変わらずエラーは解消しなかった（結局エラーの原因はわからず）
-
仕方なく再度StackBlitzの環境構築をやり直し、バージョンダウンを行わず進めた
-
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.27.0"を使用 -
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
としてSwitchではなくRoutesコンポーネントを使用 -
<Routes> <Route path="/" element={<Home />} /> <Route path="/page1" element={<Page1 />} /> <Route path="/page2" element={<Page2 />} /> </Routes>
Routeはelementを使用する
- Udemy内で解説していたexactはRoutesコンポーネントでは不要
まとめ
Udemyの動画内ではreact-router-domのバージョンを5にするのをおすすめしていたが、なぜか上手くいかなかったためバージョン6で進める方法を取りました。
バージョン6ではSwitchではなくRoutesコンポーネントをつかわないといけないのとRouteコンポーネント内の記述法がバージョン5と違いがありました。
多分react-router-domのバージョンを5のまま進める方法があると思うのですが、一旦この先のレクチャーもバージョン6で進めていこうと思います。