react-router-dom v6 ネストされたページの遷移

ページをまるごと遷移したい場合,
elementを書かず, 配下に親ページをindexで指定する。

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="page1">
          <Route index element={<Page1 />} />
          <Route path="detailA" element={<Page1DetailA />} />
        </Route>
      </Routes>

DetailA

import { Link } from 'react-router-dom';

export const Page1 = () => {
  return (
    <div>
      <h2>Page 1</h2>
      <nav>
        <Link to="detailA">Detail A</Link>
      </nav>
    </div>
  );
};

親のページを残したい場合は,
親コンポーネントにOutletをつける。
Routeをネストする。

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

DetailA

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

export const Page1 = () => {
  return (
    <div>
      <h2>Page 1</h2>
      <nav>
        <Link to="detailA">Detail A</Link>
      </nav>
      <Outlet />
    </div>
  );
};