Vite + TanStack Router - 8. その他の便利な機能

最後にTanStackRouterの便利な機能をいくつかご紹介します。

Devtools

画面上Routerの状態を表示するコンポーネントを追加できます。 あまり使うことはないと思いますが、contextの中身をみられるのは便利です。

1. インストール

1
npm install -D @tanstack/router-devtools

2. src/routes/__root.tsx でDevToolsを読み込む

1
import { Fragment, lazy, Suspense } from "react";
2
import { Outlet, createRootRoute } from "@tanstack/react-router";
3

4
const TanStackRouterDevtools =
5
process.env.NODE_ENV === "production"
6
? () => null // Render nothing in production
7
: lazy(() =>
8
    // Lazy load in development
9
    import("@tanstack/router-devtools").then((res) => ({
10
        default: res.TanStackRouterDevtools,
11
        // For Embedded Mode
12
        // default: res.TanStackRouterDevtoolsPanel
13
        })),
14
    );
15

16
export const Route = createRootRoute({
17
component: RootComponent,
18
});
19

20
function RootComponent() {
21
  return (
22
      <Fragment>
23
        <div>Hello "__root"!</div>
24
        <Outlet />
25
        <Suspense>
26
          <TanStackRouterDevtools></TanStackRouterDevtools>
27
        </Suspense>
28
      </Fragment>
29
      );
30
}

3. npm run dev を実行すると、ブラウザの左下にDevToolsが表示されます。

4. DevToolsをクリックするとルーターの状態が見られるようになります。

スクロール位置の復元

<ScrollRestoration /> コンポーネントを足すだけでページを戻った場合にスクロールの位置を復元できます。

<ScrollRestoration /> は deprecated になりました。代わりに createRouterの scrollRestoration を使います。

1
import { createRouter } from '@tanstack/react-router'
2

3
const router = createRouter({
4
  scrollRestoration: true,
5
})

Route Masking

ブラウザのロケーションバーに表示されるURLの一部を隠すことができます。

https://tanstack.com/router/latest/docs/framework/react/guide/route-masking

たとえば、

• /post/6/modal の modalを隠す
• /index?login=true の ?login=true を隠す

といった使い方をします。

ただし、以下の2つの操作をするとマスクが外れます。

• URLをコピーしたとき、マスクは外れる
• ページをリロードしたとき、マスクは外れる

このうち2番目のページリロードについては、マスクを維持する方法が3つあります。

• https://tanstack.com/router/latest/docs/framework/react/guide/route-masking#unmasking-on-page-reload

Navigation Blocking

GMailの「このページから離れますか？」と同様のダイアログを実現する仕組みです。

useBlocker というフックを使うだけで実現できます。

1
import { useBlocker } from '@tanstack/react-router'
2

3
function MyComponent() {
4
  const [formIsDirty, setFormIsDirty] = useState(false)
5

6
    useBlocker({
7
      shouldBlockFn: () => {
8
      if (!formIsDirty) return false
9

10
      const shouldLeave = confirm('Are you sure you want to leave?')
11
      return !shouldLeave
12
      },
13
    })
14

15
// ...
16
}

Eslintルール

TanStack Router用のルールがあるのでインストールしておくとよいでしょう。

https://tanstack.com/router/latest/docs/eslint/eslint-plugin-router

Static Route Data

Static Route Dataはルーター内部のグローバル定数のようなもので、これを使うと階層が下のルートで設定した値を上のルートで参照できるようになります。

現在どのページにいるかを共通ヘッダに表示したい場合などに使います。

Static Route Data https://tanstack.com/router/latest/docs/framework/react/guide/static-route-data

必要なパラメータが更新されたときだけルートを再レンダリングする

useSearch などのフックの引数に関数を渡して、必要な値だけを取り出すようにすると、その値が変更されたときのみコンポーネントが再レンダリングされます。

reduxなどの状態管理ライブラリと合わせて使うことの多いreselectのようなものです。

https://tanstack.com/router/latest/docs/framework/react/guide/render-optimizations#fine-grained-selectors

バーチャルファイルルート

バーチャルファイルルートを有効にすると、ファイルベースルーティングの振る舞いをオーバーライドできます。

ディレクトリ構造を無視してルートを設定したい場合に使いますが、ファイルベースルーティングの良さを消してしまうので乱用は禁物です。

• バーチャルルートとは別物
• パス名とファイルの対応関係を変更できる
• viteの設定で、TanStackRouter pluginに設定の追加が必要 or tsr.config.ts で設定が必要
• __virtual.ts ファイルを置くことで、ファイルベースルーティングの一部だけを書き換えることもできる
• 詳細 → https://tanstack.com/router/latest/docs/framework/react/routing/virtual-file-routes#virtual-routes-inside-of-tanstack-router-file-based-routing