11
Help us understand the problem. What are the problem?

posted at

updated at

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
11
Help us understand the problem. What are the problem?