npm create @tanstack/router@latest

npm run start

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>
  );
}

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}
  </>
  )
}