SuperAPI AI 工具集

not-found-and-errors

前端与建站

查看项目

更新于 10-16 03:16

技能介绍

用途:在 TanStack Router 中处理两类「未找到」(未匹配路径的自动 404,以及通过 notFound() 手动抛出的资源缺失)与运行错误,并配置错误边界。

主要能力:根路由可设 notFoundComponent 处理全局 404,路由器级可用 defaultNotFoundComponent;notFound() 可在 loader 或 beforeLoad 中抛出(类似 throw redirect()),并可用 notFound({ routeId }) 指定父路由、rootRouteId 指定根路由处理;notFoundMode 取 fuzzy(默认,就近有子路由的父级)或 root。错误处理方面,每条路由可配 errorComponent(接收 error、info、reset),路由器级可用 defaultErrorComponent;loader 错误后可用 router.invalidate() 重跑 loader 并重置错误边界;notFoundComponent 可用 useParams、useSearch、useRouteContext,不要依赖 useLoaderData(可能未完成),可用 notFound({ data }) 传递部分数据。路由遮蔽通过 Link 的 mask、useNavigate、createRouteMask 及 unmaskOnReload 实现,遮蔽数据存于 location.state。

使用方式:在 loader 中取不到数据时 throw notFound();组件内用 useRouter() 获取 router 后调用 router.invalidate() 重试。

限制:不要使用已废弃的 NotFoundRoute,否则 notFound() 与 notFoundComponent 不会生效;无子路由的叶子路由无法捕获路径型 not-found;遮蔽 URL 被分享或新标签打开时遮蔽数据丢失;notFoundComponent 的 data 类型为 unknown,使用前需校验。