### 概要

• Tanstack RouterStart 入門メモになります。

[ 公開 2025/02/14 ]

---

### 構成

• Tanstack Router
• node 20
• vite

---

### 関連

• https://tanstack.com/router/latest

---

### install

• https://tanstack.com/router/latest/docs/framework/react/quick-start
• create で、追加する例です。

npm create @tanstack/router@latest

---

• dev-start

npm run start

---

Search Params 取得 , Tanstack Router

• Search Paramsの取得が。難航したのでメモになります
• react-routerより、複雑なイメージでした。

---

### 関連

• search-params https://tanstack.com/router/v1/docs/framework/react/guide/search-params

• useSearch https://tanstack.com/router/v1/docs/framework/react/api/router/useSearchHook

---

• 移動元、　Link タグ使います。
• Linkタグの　search属性で、パラメータを指定
• ItemsPage.tsx

import { createFileRoute } from "@tanstack/react-router"
import { Link } from "@tanstack/react-router";


interface Item {
  id: number;
  name: string;
}

const items: Item[] = [
  { id: 1, name: "商品A" },
  { id: 2, name: "商品B" },
  { id: 3, name: "商品C" },
];

export const Route = createFileRoute("/ItemsPage")({
  component: RouteComponent,
})

function RouteComponent() {
  return (
    <div>
      <h1>商品一覧ページ</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <Link to={`/itemdetail`} 
                search={{
                  itemId: item.id,
                }}
                >
              {item.name} の詳細を見る（クエリパラメータ）
            </Link>
          </li>
        ))}
      </ul>
      <Link to="/">
        ホームページへ戻る
      </Link>
    </div>
  );
}

---

• 移動先
• ItemDetail.tsx
• createFileRoute内で。component , validateSearch定義
• RouteComponentで、Route.useSearch　でSearch Params取り出す。

import { createFileRoute } from "@tanstack/react-router"
import { useSearch, useParams  } from "@tanstack/react-router";

type ProductSearch = {
  itemId: number
}

export const Route = createFileRoute("/ItemDetail")({
  component: RouteComponent,
  validateSearch: (search: Record<string, unknown>): ProductSearch => {
    return {
      itemId: Number(search?.itemId ?? 1),
    }
  },
})

function RouteComponent() {
  const { itemId } = Route.useSearch()
  console.log("itemId=", itemId);

  return (
  <>
    <div>itemdetail !</div>
    <hr />
    itemId = {itemId}
  </>
  )
}

---