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

目的

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

バージョンアップするライブラリ

• React("react","react-dom")
• React Router("react-router-dom")

目次

1. package.jsonのバージョンを変更する
2. useHistoryのエラー
3. Switchのエラー
4. Redirectのエラー
5. renderのエラー
6. componentのエラー
7. 総括
8. 参考

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のエラー

　バージョンアップした'react-router-dom'には'useHistory'が見つかりません。公式ドキュメントを読むと'useHistory'に関する部分が見つかりました。
　'useHistory'ではなく'useNavigate'を使用します。useHistoryフックを使っている'history','history.push'も忘れずに'navigate'に変更します。
　変更が完了すると、先ほどのエラーは解消されています。

3. Switchのエラー

　バージョンアップした'react-router-dom'には'Switch'が見つかりません。公式ドキュメントを読むと'Switch'に関する部分が見つかりました。
　'Switch'ではなく'Routes'を使用します。
　変更が完了すると、先ほどのエラーは解消されています。

4. Redirectのエラー

　バージョンアップした'react-router-dom'には'Redirect'が見つかりません。公式ドキュメントを読むと'Redirect'に関する部分が見つかりました。
　'Redirect'ではなく'Navigate'を使用します。
　変更が完了すると、先ほどのエラーは解消されています。

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

5. renderのエラー

　起動すると画面には何も表示されていません。開発者ツールからコンソール画面を開くと次のようなエラーが出ています。

　ReactDOM.renderがReactバージョン18にはありません。createRootを代わりに使いましょう。エラーに表示されているURLを見るとrenderに関する部分が見つかりました。
　'render'ではなく'createRoot'を使用します。
　変更が完了すると、先ほどのエラーは解消されています。

6. componentのエラー

　パスに合うものが見つからないようです。しかしv5では表示されていたためパス自体が間違っているということはないでしょう。原因はパスを書いてある'Router.jsx'だと考えました。再びReact Routerのドキュメントを読んでみると、componentに関する部分を見つけました。
　'component'ではなく'element'を使用します。

# 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)