Tanstack Router Link多值查询参数如何转为重复键格式？

方案1：通过路由searchSchema指定数组参数格式 #

在你的路由配置里，给/foo/bar路由定义searchSchema，明确group_by是字符串数组类型，TanStack Router会自动把数组序列化为重复key的格式：

// 路由配置示例
const router = createRouter({
  routes: [
    {
      path: '/foo/bar',
      component: FooBarComponent,
      searchSchema: {
        type: 'object',
        properties: {
          group_by: {
            type: 'array',
            items: { type: 'string' },
          },
        },
      },
    },
  ],
});

之后直接在Link里传数组参数就行，框架会自动处理成?group_by=foo&group_by=bar：

<Link to="/foo/bar" search={{ group_by: ['foo', 'bar'] }}>
  跳转至目标页
</Link>

方案2：手动构建查询参数，用to的对象形式传递 #

如果不想配置schema，可以手动构造符合要求的查询字符串，再通过to的对象形式传递，避免TypeScript报错：

// 手动生成多值查询参数
const searchParams = new URLSearchParams();
['foo', 'bar'].forEach(val => searchParams.append('group_by', val));

// 用对象形式传递to参数
<Link 
  to={{
    pathname: '/foo/bar',
    search: searchParams.toString(),
  }}
>
  跳转至目标页
</Link>

为什么直接拼接to会触发TS错误？ #

TanStack Router对字符串形式的to会做严格路由匹配，要求完全符合路由配置里的path定义，不允许直接拼接查询参数。用对象形式拆分pathname和search，就能绕过这个校验。

内容的提问来源于stack exchange，提问作者Janne