React Router v6でパスパラメータが変更されたら再レンダリングしたい

パスパラメータの変更は再レンダリングをトリガーしない。そのため、非制御の input 要素などの値はリセットされない。

特定のページでのみパスパラメータの変更で再レンダリングをトリガーするには key を使えば良い。

jsx

const SomePage = () => {
  const { someId } = useParams();

  return <div key={someId}>{/** */}</div>;
};

全てのページでパスパラメータが変更される度に切り替えたければ、次のように Outlet に key を設定すればいい。

jsx

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about/:id" element={<About />} />
        <Route path="*" element={<NoMatch />} />
      </Route>
    </Routes>
  );
}

function Layout() {
  const params = useParams();
  return (
    <div>
      <Link to="/about/001">A001</Link>
      <Link to="/about/002">A002</Link>
      <Outlet key={JSON.stringify(params)} />
    </div>
  );
}

編集