React-Router v6 新しいuseNavigateでのページ遷移のやり方

React-Routerのv6からはAPIが色々変わり、ページ遷移にuseNavigateというAPIを使うようになりました。
ちょっと困った所として使用したコンポーネントを起点としてパスを積み上げて行くなど癖のある動きをします。
そこでuseNavigateのページ遷移や注意点についてまとめます。

ページ遷移例

http://localhost/path1/path2
というURLにアクセスしたと想定します。

function RouteComponent() {
  return (
    <Routes>
        <Route path="/path1/path2" element={<PageComponent />} />
    </Routes>
  )
}

export default function PageComponent() {
  const navigate = useNavigate();

  // パスを積み上げる
  navigate('path3') // http://localhost/path1/path2/path3

  // コンポーネントと同一レベルのパスに遷移する
  navigate('../path5') // http://localhost/path1/path5

  // ルートを起点に遷移する
  navigate('/path4') // http://localhost/path4
}

ワイルドカードを使った際の注意点

入れ子のルータ制御をしている場合ワイルドカードを使用すると思いますが、
あくまでもコンポーネントが制御しているパスを起点に遷移するため、ワイルドカードの範囲のパスは考慮されない所に注意が必要です。

下記のURLにアクセスした際の遷移について記載します。
http://localhost/path1/path2/path3

function RouteComponent() {
  return (
    <Routes>
        <Route path="/path1/path2/*" element={<PageComponent />} />
    </Routes>
  )
}

export default function PageComponent() {
  const navigate = useNavigate();

  // ページを積み上げる（path3が消える）
  navigate('path4') // http://localhost/path1/path2/path4

  // コンポーネントと同一レベルのパスに遷移する
  navigate('../path5') // http://localhost/path1/path5
}

ワイルドカードで判定されたpath3が消えています。

参考

https://qiita.com/jonakp/items/5424bf89946269570496
https://reach.tech/router/api/useNavigate