SuperAPI AI 工具集

tanstack-router-core-path-params

通用与其它

查看项目

更新于 10-16 00:02

技能介绍

用途:在 TanStack Router 中定义与读取 URL 路径参数,覆盖动态段、通配、可选参数和前后缀写法。

主要能力:动态段用 $paramName 捕获到下一个 /;以裸 $ 结尾的路由捕获剩余路径,值放在 _splat;{-$param} 表示可选参数,缺失时为 undefined,可用于 i18n 可选 locale;用 {} 包裹 $param 支持单段内前后缀,如 /posts/post-{$postId}、/files/{$fileName}.txt。类型可完全推断。

使用方式:路由文件中用 createFileRoute 定义,组件内通过 Route.useParams() 或带 from 的 useParams({ from: '/posts/$postId' }) 读取,也可用 useParams({ strict: false }) 取联合类型。loader 与 beforeLoad 能拿到 params。跳转用 Link 的 to 加 params 属性,或 navigate({ to, params });可选参数传 undefined 即省略,函数形式 params={(prev) => ({...prev, postId})} 可保留其他参数。字符串参数可用 params.parse/params.stringify 双向转换,或在 loader 中 parseInt。额外允许字符通过 createRouter 的 pathParamsAllowedCharacters 配置。

限制与注意:禁止把参数插值进 to 字符串,必须用 params 属性;useParams 返回值不要手写类型标注。通配用 $ 而非 , 在 v1 仅向后兼容、v2 将移除;基础动态段不要加花括号。路径参数始终是字符串。