25
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-12-09

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

25
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?