【React】バージョンアップデートに伴うエラーの解決

# 目的
　Reactでライブラリのバージョンアップを実施したときに発生したエラーの解決方法について書きます。単純に`package.json`のバージョンを変えるだけではうまくいきません。
 
# バージョンアップするライブラリ
- React("react","react-dom")
- React Router("react-router-dom")

# 目次
1. `package.json`のバージョンを変更する
1. useHistoryのエラー
1. Switchのエラー
1. Redirectのエラー
1. renderのエラー
1. componentのエラー
1. 総括
1. 参考

# 1. `package.json`のバージョンを変更する
　`package.json`の"dependencies"のライブラリのバージョンを変更しました。
 ```
 "react": "^18.3.1",            # 17.0.2 -> 18.3.1
 "react-dom": "^18.3.1",        # 17.0.2 -> 18.3.1
 "react-router-dom": "^6.27.0", # 5.3.0  -> 6.27.0
 ```
 　変更後にサーバーを起動して動作確認を行うと、動かなくなっています。加えて、大量のエラーが出ています。表示されたエラーに対して地道に解決していきます。

# 2. useHistoryのエラー
 ![スクリーンショット 2024-10-25 10.36.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884269/bec99a26-0f7b-4100-f8bf-0c35c46c2c42.png)
 　バージョンアップした'react-router-dom'には'useHistory'が見つかりません。公式ドキュメントを読むと['useHistory'に関する部分](https://reactrouter.com/en/main/upgrading/v5#use-usenavigate-instead-of-usehistory)が見つかりました。
　<font color="red">**'useHistory'ではなく'useNavigate'を使用します。**</font>useHistoryフックを使っている'history','history.push'も忘れずに'navigate'に変更します。
 　変更が完了すると、先ほどのエラーは解消されています。

# 3. Switchのエラー
![スクリーンショット 2024-10-25 16.28.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884269/551147d3-a002-aeb7-0adc-68725289bc2b.png)
　バージョンアップした'react-router-dom'には'Switch'が見つかりません。公式ドキュメントを読むと['Switch'に関する部分](https://reactrouter.com/en/main/upgrading/v5#upgrade-all-switch-elements-to-routes)が見つかりました。
 　<font color="red">**'Switch'ではなく'Routes'を使用します。**</font>
　変更が完了すると、先ほどのエラーは解消されています。

# 4. Redirectのエラー
 ![スクリーンショット 2024-10-25 15.56.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884269/9511be03-561f-2c96-5e3a-bbed0a37a128.png)
　バージョンアップした'react-router-dom'には'Redirect'が見つかりません。公式ドキュメントを読むと['Redirect'に関する部分](https://reactrouter.com/en/main/upgrading/v5#remove-redirects-inside-switch)が見つかりました。
 　<font color="red">**'Redirect'ではなく'Navigate'を使用します。**</font>
  　変更が完了すると、先ほどのエラーは解消されています。

　以上で筆者の環境では画面表示前のエラーが全て解消されました。次からは開発者ツールのコンソール画面のエラーを解消していきます。

# 5. renderのエラー
　起動すると画面には何も表示されていません。開発者ツールからコンソール画面を開くと次のようなエラーが出ています。
![スクリーンショット 2024-10-25 18.13.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884269/9122b791-f16e-4c5d-59b5-dbc1f2506d79.png)
 　ReactDOM.renderがReactバージョン18にはありません。createRootを代わりに使いましょう。エラーに表示されているURLを見ると[renderに関する部分](https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)が見つかりました。
　<font color="red">**'render'ではなく'createRoot'を使用します。**</font>
　変更が完了すると、先ほどのエラーは解消されています。

# 6. componentのエラー
![スクリーンショット 2024-10-26 9.49.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884269/ddceb096-1980-ebdb-d2c9-d95eb27e4774.png)
　パスに合うものが見つからないようです。しかしv5では表示されていたためパス自体が間違っているということはないでしょう。原因はパスを書いてある'Router.jsx'だと考えました。再びReact Routerのドキュメントを読んでみると、[componentに関する部分](https://reactrouter.com/en/main/upgrading/v5#advantages-of-route-element)を見つけました。
　<font color="red">**'component'ではなく'element'を使用します。**</font>
```
# v5
<Route exact path="/" component={Home} />
# v6
<Route exact path="/" element={<Home />} />
```
　変更が完了すると、先ほどのエラーは解消されています。

 　以上で筆者の環境ではv6で動くようになりました。

# 7. 総括
　今回はバージョンアップデートを行いました。バージョンが変わると数字だけでなく、仕様も変わるため、複数のファイルを書き直さなければなりません。その分、便利な機能が増えるというメリットもあります。~~（v5を使ったことがないとわからないが）~~

# 8.参考
　この記事は以下の情報を参考に書きました。
 * React Router.Upgrading from v5(https://reactrouter.com/en/main/upgrading/v5#upgrading-from-v5)
 * React.How to Upgrade to React 18(https://react.dev/blog/2022/03/08/react-18-upgrade-guide)