完成后你将能够
能创建 /issues/$issueId 路由并类型安全地读取参数。
文件名就是路由设计
在文件路由中,$issueId 会变成必填路径参数。createFileRoute 的字符串由路由生成器校验,它不只是一个普通字符串。
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/issues/$issueId')({
component: IssuePage,
})
function IssuePage() {
const { issueId } = Route.useParams()
return <h1>Issue #{issueId}</h1>
}链接也参与类型检查
当 to 包含 $issueId 时,Link 会要求 params。参数缺失会在编译期暴露,而不是等用户点击后才发现。
把本课变成可验证的能力
列表页可以链接到 `/issues/$issueId`,详情页通过 Route API 得到类型化参数。
增加 `/issues/$issueId/edit` 子路由,并复用父级 issueId 参数生成返回详情页的 Link。
故意给 Link 传错参数名时 TypeScript 应失败;使用正确 issueId 后页面应显示对应详情。
- 从 `window.location` 手工切割路径参数。
- 把参数当成数字而不在边界显式转换。