Router.jsxの構造

import { Routes, Route } from 'react-router-dom';
import { Home } from '../Home';
import { Page1 } from '../Page1';
import { Page2 } from '../Page2';
import { page1Routes } from './Page1Routes';
import { page2Routes } from './Page2Routes';
import { Page404 } from '../page404';

export const Router = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="page1">
        <Route index element={<Page1 />} />
        {page1Routes.map((route) => (
          <Route key={route.path} path={route.path} element={route.element} />
        ))}
      </Route>
      <Route path="page2">
        <Route index element={<Page2 />} />
        {page2Routes.map((route) => (
          <Route key={route.path} path={route.path} element={route.element} />
        ))}
      </Route>
      <Route path="*" element={<Page404 />} />
    </Routes>
  );
};

<Route path="page1">
<Route index element={<Page1 />} />
{page1Routes.map((route) => (
  <Route key={route.path} path={route.path} element={route.element} />
))}
</Route>

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

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