react-router v7 のパス指定エラーについて

はじめに

ルーティングを実装中次のエラーが表示されました。

Uncaught Error: Absolute route path "/detailA" nested under path "/page1" is not valid. An absolute child route path must start with the combined path of all its parent routes.

翻訳：キャッチされないエラー: パス「/page1」の下にネストされた絶対ルート パス「/detailA」が無効です。絶対子ルート パスは、すべての親ルートを結合したパスで始まる必要があります。

バージョン

react-router: 7.2.0

下記のように記述していました。

Router.jsx

import { Route, Routes } from "react-router";
import { Home } from "../Home";
import { Page1 } from "../Page1";
import { Page2 } from "../Page2";
import { page1Routes } from "./Page1Routes";

export const Router = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/page1">
        <Route index element={<Page1 />} /> {/* /page1にアクセスしたときにPage1を表示 */}

        {page1Routes.map((route, index) => (
          <Route key={index} path={route.path} element={route.children} />
        ))}

      </Route>
      <Route path="/page2" element={<Page2 />} />
    </Routes>
  );
};

.Page1Routes.jsx

import { Page1DetailA } from "../Page1DetailA";
import { Page1DetailB } from "../Page1DetailB";

export const page1Routes = [
  {
    path: "/detailA", // ← ここが原因のようです
    children: <Page1DetailA />,
  },
  {
    path: "/detailB",
    children: <Page1DetailB />,
  },
];

解決方法

パスの記述を修正

.Page1Routes.jsx

import { Page1DetailA } from "../Page1DetailA";
import { Page1DetailB } from "../Page1DetailB";

export const page1Routes = [
  {
    path: "detailA",
    children: <Page1DetailA />,
  },
  {
    path: "detailB",
    children: <Page1DetailB />,
  },
];

おわりに

意図した挙動になってくれました。