react-router-domのv6でルーティングされないときの注意点

先日久々にreact-router-domを触ったところv6になったことで、少しルーティングに詰まったので軽い共有です。

ルーティングの変更点

v5までの記法

v5までは以下のようにルーティングをしていました。

<BrowserRouter>
  <Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route path="/login">
      <Login />
    </Route>
    <Route path="/user/:id" children={<User />} />
  </Switch>
</BrowserRouter>

v6からの記法

しかし、v6からは以下のようになります。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/login" element={<Login />} />;
    <Route path="users/*" element={<Users />} />
  </Routes>
</BrowserRouter>;

つまり注意点はこれですね。

• Route指定の前にRoutesを忘れずに
• Switchは要らない
• exactはもう無くなった

exactが無くなったなら子孫ルーティングはどうなる？

『exactの指定が無くなったなら子コンポーネントのルーティングはどうするの？』ということですが、そちらも安心です。pathに/*を使用することで他コンポーネントで指定されているルートを表現できます。

先程の/users/*なら↓のようにハンドリングできますよね。

Users.tsx

export const Users = () => {
  return (
    <div>
      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
};

分かりやすいようにネストして書きたいならこうです。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/login" element={<Login />} />
    <Route path="users" element={<Users />}>
      <Route path="me" element={<OwnUserProfile />} />
      <Route path=":id" element={<UserProfile />} />
    </Route>
  </Routes>
</BrowserRouter>;

終わりに

いや〜約半年ぶりにReactのルーティング部分を触ったので、ちょっと戸惑いました。同じような状況の方への助けになれば幸いです。

他にもv6からの変更点は多くあるので、本格的に取り組むなら公式ドキュメントをCHECKしてみてください！

https://reactrouter.com/docs/en/v6/upgrading/v5