用途:@tanstack/solid-router 是 TanStack Router 面向 Solid 的绑定,用于在 Solid 应用中构建类型安全的客户端路由。它构建于 router-core 之上,与 @solidjs/router 是不同库。
主要能力:提供 RouterProvider、Link、Outlet、Navigate、Await、CatchBoundary、CatchNotFound、Block、ClientOnly 等组件,以及 useRouter、useRouterState、useNavigate、useSearch、useParams、useLoaderData、useMatch、useMatches、useLocation、useBlocker、useCanGoBack、useHydrated、useLinkProps、useMatchRoute 等钩子。支持基于文件的路由、自动代码分割、路由上下文鉴权、延迟数据与 Suspense、滚动恢复、Head 管理(基于 @solidjs/meta)。
使用方式:安装 npm install @tanstack/solid-router,开发依赖 npm install -D @tanstack/router-plugin @tanstack/solid-router-devtools。在 vite.config.ts 中配置 tanstackRouter({ target: 'solid', autoCodeSplitting: true }),且必须放在 solid 插件之前。创建根路由与路由文件后,用 createRouter 创建实例,并通过 declare module 注册类型。
限制与注意:类型完全推断,不要强制转换或标注;默认客户端优先,loader 默认在客户端运行;多数钩子返回 Accessor<T>,必须调用(如 params())才能读取响应式值,这是与 React 版最大差异;不要解构响应式值;beforeLoad 与 loader 是普通异步函数,不能使用钩子;插件 target 必须设为 solid。ScrollRestoration 已弃用,改用 createRouter 的 scrollRestoration: true。