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 へのコード書き換えの一例としてみなさまのお役に立てれば幸いです。