useParamsの動作

page2Routes.jsx

import { UrlParameter } from '../UrlParameter';

export const page2Routes = [
  {
    path: ':id',
    element: <UrlParameter />,
  },
];

Router.jsx

<Route path="page2">
  <Route index element={<Page2 />} />
  {page2Routes.map((route) => (
    <Route key={route.path} path={route.path} element={route.element} />
  ))}
</Route>

Router.jsxでmap()メソッドを使ってRouteを生成する際に, page2Routes.jsxから:idなどのパラメータが設定されたRouteが生成されようになる。

Page2

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

export const Page2 = () => {
  return (
    <div>
      <h1>Page2ページです</h1>
      <Link to="100">URL Parameter</Link>
    </div>
  );
};

ユーザーがpath page2/100 のページを開いたとき, page2/:idとなっていたRouteのパラメータはpage2/100となる。

UrlParameter.jsx

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

export const UrlParameter = () => {
  const { id } = useParams();

  return (
    <div>
      <h1>UrlParameterページです</h1>
      <p>{id}</p>
    </div>
  );
};

UrlParameterが表示されるとき, Routeのパラメータ:idを取得する。