React Router v6 が出たので v5 からアップグレードしてみた

こんにちは、広野です。

React アプリの画面遷移制御のために React Router を使っているのですが、昨年 v6 がリリースされ、何も考えずにバージョンアップしたら見事にアプリが動きませんでした。やっぱり。

そのときはバージョンアップは避けましたが、いつまでも避けては通れないので、先日 React コードを書き換えて対応しました。ここでは気付いた点のみ紹介します。

やったこと

元のコード (v5)

import { BrowserRouter, Switch, Route } from 'react-router-dom';

//中略//

<BrowserRouter>
  <Switch>
    {/* シンプルなパス一致時 */}
    <Route path="/page1">
      <Page1 username={username} />
    </Route>
    {/* 2階層目のパス入力文字列を変数idに格納 */}
    <Route path="/page2/:id">
      <Page2 username={username} />
    </Route>
    {/* パスが存在しないとき、兼ルート */}
    <Route path="/">
      <Home username={username} />
    </Route>
  </Switch>
</BrowserRouter>

書き換え後コード (v6)

import { BrowserRouter, Routes, Route } from 'react-router-dom';

//中略//

<BrowserRouter>
  <Routes>
    {/* ルート */}
    <Route path="/" element={<Home username={username} />} />
    {/* シンプルなパス一致時 */}
    <Route path="/page1" element={<Page1 username={username} />} />
    {/* 2階層目のパス入力文字列を変数idに格納 */}
    <Route path="/page2">
      <Route path=":id" element={<Page2 username={username} />} />
    </Route>
    {/* パスが存在しないとき */}
    <Route path="*" element={<Home username={username} />} />
  </Routes>
</BrowserRouter>

v5 と v6 の違い

  • importしていた Switch が、Routes に変わった。
  • Route の記述が1行になった。
    ルーティング先コンポーネントを子コンポーネントではなく element 属性で指定するようになった。
  • 2階層目のパス入力文字列を変数に格納したいときに、これまでパスを2階層分まとめて記述していたが、1階層ごとに親子コンポーネントに分けて記述するようになった。
  • 入力されたパスが存在しないときのために * ワイルドカードを指定できるようになった。v5 では記述した Route 条件を上から順にチェックし、デフォルトではパス文字列が前方一致したら抜ける、という仕組みだったため、最終 Route 条件に / ルートのパスを入れなければならなかった。おそらく v6 ではそこに気を遣わなくて済むよう条件チェックアルゴリズムが改善されていると思われる。
  • 全体的に、コード量が減った。

Link や useLocation の動きには変更がなかったため、コード書き換えしなくて済んで助かりました。

まとめ

いかがでしたでしょうか?

あくまでも気付いたレベルなので、ご利用の機能によってはまた違うところでつまずいてしまうかと思いますが、React Router v5 から v6 へのコード書き換えの一例としてみなさまのお役に立てれば幸いです。

著者について
広野 祐司

AWSサーバーレスアーキテクチャを駆使して社内クラウド人材育成アプリや教育コンテンツをつくっています。ReactでSPAを書き始めたら、快適すぎて他の開発言語には戻れなくなりました。AWSサーバーレスやReactの仲間を増やしたいです。
取得資格:AWS認定は7つ、ITサービスマネージャ、ITIL v3 Expert、等
2020, 2021 APN AWS Top Engineers 受賞
2022 AWS Partner Ambassador 受賞
好きなAWSサービス:AWS Amplify / Amazon Cognito / AWS Step Functions / AWS CloudFormation

広野 祐司をフォローする
クラウドに強いによるエンジニアブログです。
SCSKは専門性と豊富な実績を活かしたクラウドサービス USiZE(ユーサイズ)を提供しています。
USiZEサービスサイトでは、お客様のDX推進をワンストップで支援するサービスの詳細や導入事例を紹介しています。
その他技術ナレッジ
TechHarmony
タイトルとURLをコピーしました