如何为TanStack Router路由生成类型安全Href适配React Spectrum Link？

我正在使用React Spectrum，需要将其<Link>组件与TanStack React Router配合使用。根据Spectrum文档，已完成顶层Provider配置，暴露导航函数：

import { Provider, defaultTheme } from '@adobe/react-spectrum';
import { useNavigate } from '@tanstack/react-router';

export function App(props: AppProps) {
  const { children } = props;
  const navigateFn = useNavigate();

  const navigate = (to: string) => {
    navigateFn({ to });
  };

  return (
    <Provider theme={defaultTheme} router={{ navigate }}>
      {children}
    </Provider>
  );
}

我定义了如下重置密码路由：

export const resetRoute = createRoute({
  getParentRoute: () => authRoute,
  path: '/reset-password/$resetToken',
  component: Reset,
});

现在需要在组件中生成可传递给React Spectrum <Link>的href，但找不到类型安全的构造方式。期望有如下类型安全的方法生成URL：

const href: string = useHrefForRoute({
  to: resetRoute,
  
  // 传入无效参数时触发类型错误
  params: {
    resetToken: '1234',
  },
});

解决方案 #

TanStack Router 提供了两种类型安全的方式生成路由URL：

1. 直接使用路由对象的 getPath 方法

每个通过createRoute创建的路由对象都内置了getPath方法，它会根据路由的路径模板自动推导参数类型，传入无效参数时TypeScript会直接报错：

import { Link } from '@adobe/react-spectrum';
import { resetRoute } from './routes';

// 类型安全：缺少resetToken或类型错误会触发TS报错
const resetHref = resetRoute.getPath({ resetToken: '1234' });

return (
  <Link href={resetHref}>重置密码</Link>
);

2. 使用useRouter的resolvePath方法

如果你需要结合路由上下文（比如相对路径、查询参数等），可以通过useRouter hook获取路由实例，调用resolvePath方法生成完整URL：

import { Link } from '@adobe/react-spectrum';
import { useRouter } from '@tanstack/react-router';
import { resetRoute } from './routes';

const router = useRouter();
// 类型安全的参数推导
const resetHref = router.resolvePath({
  path: resetRoute.path,
  params: { resetToken: '1234' },
  // 可选：添加查询参数
  search: { foo: 'bar' },
});

return (
  <Link href={resetHref}>重置密码</Link>
);

这两种方式都能实现你想要的类型安全约束，确保参数正确，避免手动拼接URL带来的错误。

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