まだβ版だけど React Router v6 使いたい！という人のための v5 -> v6 移行メモ

React Router v6 は v5 から破壊的な変更が多数含まれている。
まだ正式リリースではないが(20200817時点で6.0.0-beta.0)、気になったので試してみた。その中で修正が必要になった項目、及び項目毎の参考ドキュメントを以下に記載する。

「まだβ版だけど React Router v6 試したい！」という方がいたらぜひ参考にしてほしい。

#留意事項

• 参考ドキュメントはあくまで現時点(=β版)でのものであり、今後正式リリース時にはより適切ドキュメントも併せて提示されるはず。正式リリース後はそちらを参照すること。(その際は出来るだけこの記事もアップデートしたい...)

• 記載するのはあくまで私の環境で必要になった箇所だけなので注意されたし。ただ他の変更に関しても提示する参照ドキュメントを辿ることでおおよそ確認できると思われる。

v5 -> v6 移行時に(私の環境で)必要だった修正

Switchの廃止

<Routes>を使用する。おそらくこの点が最も影響の大きい変更箇所。

表示するコンポーネントは、<Routes path="/" element={<SomeComponent>}>の形で、elementプロパティを用いて指定する。私は一部この修正を忘れた結果、期待するコンポーネントが表示されずに微ハマりした。

参考:
https://reacttraining.com/blog/react-router-v6-pre/#introducing-routes

nested routing

Routesのelementで指定したコンポーネント内に、更に複数のパスの候補がある(nestする)場合は、pathの指定に "*"を使う。下記"参考"のリンク先にサンプルコードがあるので詳しくはそちらを参照されたし。

参考:
https://reacttraining.com/blog/react-router-v6-pre/#introducing-routes

Redirectコンポーネントの廃止

<Navigate to='XXX'>を使う

廃止理由はイマイチ不明だが、以下(及び関連リプライ)が参考になるかもしれない。(クライアントからトリガーされるリダイレクト処理は不適切ということだろうか?)

Cool.

Writing a blog post explaining why client-side redirects are no bueno (thanks to our conversation. will credit).

— Kent C. Dodds 🌌 (@kentcdodds) April 13, 2020

参考:
https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#use-navigate-instead-of-history

useHistoryの廃止

useNavigateを使う。具体的な使い方は"参考"のリンク先にあるサンプルコード参照。
history.push('XXX')の代替に当たるnavigate('YYY')は、相対パスであることに注意。

参考:
https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#use-navigate-instead-of-history

history(npmパッケージ)が追加で必要

yarn add history で追加

公式ドキュメントに記載があるわけではないが、私の環境では必要になった(コンパイルエラーが出た)ため記載。

参考サイト

https://reacttraining.com/blog/react-router-v6-pre/
公式のv6に関する解説

https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links
公式のv5 -> v6 移行に関する解説