【React Router】v5からv6への主な変更点

はじめに

jisouのカリキュラムとしてUdemyの講座でReact Routerについて学習中ですが、講義通り記述してもエラーが出てしまい動かないことがあったので、今回直面したエラーについてまとめていきたいと思います。

学習で使用しているUdemyの講座は下記になります。
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

まず、大前提として2025年7月時点でcode sand boxでReact Routerをインストールすると"react-router-dom": "7.7.1"とバージョンは7となります。
本講義ではバージョン5を使用しているため、一部記法が古くなっておりバージョン7では動かないものがありました。

気づき

・<Switch>から<Routes>への変更

・<Route>コンポーネントで囲っていた表示させたいコンポーネントを<Route>のelementプロパティを使って、表示したいコンポーネントを JSXとして渡す。

誤ったコードの例

<Routes>
  <Route path="/" />
  <Home /> 
</Routes>

正しいコード

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/page1" element={<Page1 />} />
  <Route path="/page2" element={<Page2 />} />
</Routes>

・<Route>にrenderプロパティは使用しない

・ネストは<Routes>コンポーネントのトップレベルに<Route>コンポーネントを配置する

コード例

    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page1/detailA" element={<Page1DetailA />} />
        <Route path="/page1/detailB" element={<Page1DetailB />} />
        <Route path="/page2" element={<Page2 />} />
    </Routes>

※詳細画面をレイアウト付きでネストする場合には、詳細画面のコンポーネントに<Outlet>を記載し、Page1のRouteに詳細ページのRouteをネストする

詳細ページのコード

import { Link, Outlet } from "react-router-dom";

export const Page1 = () => {
  return (
    <div>
      <h1>Page1ページです</h1>
      <Link to="detailA">DetailA</Link>
      <br />
      <Link to="detailB">DetailB</Link>
      <Outlet />
    </div>
  );
};

App.jsxページのコード

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/page1" element={<Page1 />}>
    <Route path="detailA" element={<Page1DetailA />} />
    <Route path="detailB" element={<Page1DetailB />} />
  </Route>
  <Route path="/page2" element={<Page2 />} />
</Routes>

おわりに

バージョン違いによりアプリが動かなくなるという事象に初めてあったため、エラーが表示された時には焦りとなぜ表示されないのか全く分かりませんでした。

ただ、落ち着いてググってみると既に解決策が丁寧にまとめられていたため（とても分かりやすい記事でした）、バージョンの違いによるエラーだと分かれば何とか対処できそうだと実感できました。

まだ動画講義を学習中のため、引き続き気づき事項があれば記載していきたいと思います。

参考