ルート遷移には 4つの方法があります。ユーザーのクリックでページを移動する場合は1を使い、それ以外の場合に2〜4を使います。

とりあえず1と2だけ覚えておけば事足りると思います。

1. <Link /> コンポーネントを使う
2. useNavigate() フックを使う
3. <Navigate /> コンポーネントを使う
4. Router.navigate() APIを使う

1. <Link /> コンポーネント

<Link /> コンポーネントは <a /> タグに変換されます。

to属性

to に遷移先のパスを書きます。<a />タグのhrefにあたります。

1
<Link to="/posts">Posts</Link>

params属性

パスパラメータを渡す場合はparamsを使います。以下の例では http://localhost/posts/123 となります。

1
<Link to="/posts/$postId" params={{postId: '123'}}>Post 123</Link>

from属性

from には今いるページのパスを書きます。from属性は必須ではありません、toを相対パスにしたい場合に指定します。

1
const postIdRoute = createRoute({
2
  path: '/blog/post/$postId',
3
})
4

5
const link = (
6
  <Link from={postIdRoute.fullPath} to="../categories">
7
    Categories
8
  </Link>
9
)

また、from を書いておくと searchの型推定が速くなります。

https://tanstack.com/router/latest/docs/framework/react/guide/type-safety#narrow-to-relevant-routes-as-much-as-you-possibly-can

search 属性

サーチパラメータはsearch 属性に書きます。search属性にはオブジェクトもしくは関数を書きます。

以下の例では http://localhost/search?query=tanstack となります。

1
<Link
2
  to="/search"
3
  search={{ query: 'tanstack' }}
4
>
5
  Search
6
</Link>

関数は前のパラメータを引数に受け取るので、一部だけ書きかえたいときに便利です。

1
<Link
2
  to="."
3
  search={
4
    (prev) => ({
5
      ...prev,
6
      page: prev.page + 1,
7
    })
8
  }
9
>
10
  Next Page
11
</Link>

• https://tanstack.com/router/latest/docs/framework/react/guide/navigation#search-param-links

hash属性

ハッシュは hash で追加し、to="/post/111#title" のようには書きません。

activeProps と inactiveProps

リンクがアクティブになったとき、非アクティブになったとき classNameやstyleなどの属性を設定できます。オブジェクトまたは関数を指定できます。

classNameとstyle のみは <Link /> で指定したものとマージされますが、その他の属性は上書きされます。

1
<Link
2
  to="/section-1"
3
    activeProps={
4
    {
5
      style: {
6
        fontWeight: 'bold',
7
      },
8
      className: "active",
9
      }
10
    }
11
>
12
Section 1
13
</Link>

子要素にアクティブ状態を渡す

<Link /> の子要素として関数を定義すると、引数で isActive を受け取れます。

1
<Link to="/blog/post">
2
  {({ isActive }) => {
3
    return (
4
        <>
5
        <span>My Blog Post</span>
6
        <icon className={isActive ? 'active' : 'inactive'} />
7
        </>
8
    )
9
  }}
10
</Link>

2. useNavigateフック

フックを実行した戻り値のnavigate 関数を使ってページ遷移します。

1
const navigate = useNavigate({from: '/post/$postId'})
2
// ...
3
navigate({ to: '/posts/$postId', params: { postId } })

3. <Navigate /> コンポーネント

コンポーネントがマウントされたタイミングでページ遷移が起こります。

4. router.navigate API

useNavigateフックの戻り値と同じ、ただしrouterを参照できればどこでも使えます。

<MatchRoute /> と useMatchRoute()

to属性で指定したルートにマッチしたときだけに表示されるコンポーネントです。

pending 属性をつけるとページ遷移時に時間がかかる場合にページを読込中であることを表示するのに使えます。

表示・非表示を自動で切り替えてくれるので便利です。

linkOptions関数

linkOptions 関数を使うと <Link /> navigation redirect で共通で使えるオプションを作成できます。

まとめ

• ユーザー操作のページ遷移には <a /> タグではなく <Link /> を使う
• コールバック内からのページ遷移には useNavigation フックを使う