SuperAPI AI 工具集

react-router

前端与建站

查看项目

更新于 10-16 07:58

技能介绍

用途:该技能面向使用 React Router 构建 React 应用的开发场景,帮助在 Framework、Data、Declarative 以及不稳定的 RSC 模式下正确配置路由、路由模块、loader、action 等。

主要能力:先识别应用所处模式,再加载对应参考文档,并以已安装包版本的文档为准。模式识别依据包括:Framework 模式可见 @react-router/dev 依赖、react-router.config.ts、app/routes.ts、app/entry.server.tsx 或 app/entry.client.tsx、app/routes/ 下的路由模块、loader/action/clientLoader/clientAction/ErrorBoundary/meta/links/headers 等导出、./+types/... 导入、@react-router/dev/vite 插件;Data 模式可见 createBrowserRouter、createHashRouter、createMemoryRouter、createStaticRouter、<RouterProvider router={router}>、含 path/children/loader/action/Component/ErrorBoundary/lazy 的路由对象;Declarative 模式可见 <BrowserRouter>、<HashRouter>、<MemoryRouter>、<Routes> 与 <Route> JSX 配置、element={<Component />};RSC 模式可见 unstable_reactRouterRSC、@vitejs/plugin-rsc、unstable_RSCRouteConfig、entry.rsc、ServerComponent、ServerErrorBoundary、ServerLayout、ServerHydrateFallback 及 use client/server-only/client-only 等指令。

使用方式:识别模式后读取对应参考文件(framework-mode.md、data-mode.md、declarative-mode.md、rsc.md)。RSC Framework 需同时读 framework-mode.md 与 rsc.md,RSC Data 需同时读 data-mode.md 与 rsc.md。文档以 node_modules/react-router/docs/ 下随包发布的 markdown 为准,关键路径包括 index.md、start/、how-to/、explanation/、upgrading/;若安装版本不含本地文档,在仓库内可用 repo 的 docs/,在消费方应用中回退到与版本匹配的网站文档。多数文档顶部带 [MODES: framework, data, declarative] 标记,仅当标记与当前应用模式匹配时才应用。RSC 主要文档见 how-to/react-server-components.md。

适用场景:配置路由、编写路由模块、使用 loader/action 数据 API、进行模式迁移(如 Declarative→Data、Declarative/Data→Framework、Framework 的 SPA/SSR/预渲染变更、future flags 与升级)时。

限制:RSC 支持不稳定;不要将 Framework/Data 模式套用到 Declarative 应用,除非有意迁移模式;Framework 示例通常使用默认 app/ 目录,但需先查看 react-router.config.ts 中的自定义 appDirectory。资料未提供安装命令、收费与价格信息。