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

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

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

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

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

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>
  );
}