Tanstack RouterでURLのパラメータを受け取る方法

createFileRoute の validateSearch オプションに関数を指定することで、URLの検索パラメータを検証し、安全に型付けされた状態でコンポーネントに渡すことができる。

下記は、name という検索パラメータを受け取る例。

import { createFileRoute } from '@tanstack/react-router'

// URLに `?name=...` が含まれる場合を想定
export const Route = createFileRoute('/')({
  // search パラメータを検証し、コンポーネントに渡す値を返す
  validateSearch: (search: { name?: string }) => {
    // デフォルト値を設定
    return { name: search.name || 'Guest' } 
  },
  component: App,
});

function App() {
  // validateSearch で検証・変換された値を取得
  const { name } = Route.useSearch();

  return <div>Hello, {name}!</div>
}

また、validateSearchに指定する関数はzodなどのバリデーションライブラリを使用することも可能。

参考