mcpField
R
react-router

react-router

github.com/remix-run开发56.6k1.8k 次安装今天更新
代码仓库

关于 react-router

react-router 是用于 React Router 开发的技能，指导开发者先识别应用模式，再查阅对应参考资料和与已安装软件包版本匹配的文档。

主要功能

  1. 01识别 Framework、Data、Declarative 或 RSC 模式
  2. 02加载对应模式的技能参考
  3. 03查阅匹配已安装版本的文档
  4. 04切换模式时查看迁移指南

适用场景

  1. 01为现有应用选择合适模式
  2. 02核对已安装版本的 API
  3. 03规划模式迁移

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/remix-run/react-router --skill react-router

安装后在 Claude Code 中输入/react-router确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
data-mode.md
declarative-mode.md
framework-mode.md
rsc.md

详细介绍

React Router

React Router 是分模式的。在修改应用之前，先确定模式，加载对应的参考文档，然后阅读已安装包版本的已安装文档。

确定模式

不要将 Framework/Data 模式应用到 Declarative 应用，除非你有意迁移模式。

Framework 模式

当你看到以下内容时，使用 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 的 React Router Vite 插件

Framework 示例通常使用默认的 app/ 目录，但在假设确切路径之前，请检查 react-router.config.ts 中的自定义 appDirectory。

然后阅读 references/framework-mode.md。

Data 模式

当你看到以下内容时，使用 Data 模式指南：

  • createBrowserRouter、createHashRouter、createMemoryRouter 或 createStaticRouter
  • <RouterProvider router={router}>
  • 具有 path、children、loader、action、Component、ErrorBoundary 或 lazy 等属性的路由对象
  • 不包含 Framework Vite 插件的数据 API

然后阅读 references/data-mode.md。

Declarative 模式

当你看到以下内容时，使用 Declarative 模式指南：

  • <BrowserRouter>、<HashRouter> 或 <MemoryRouter>
  • <Routes> 和 <Route> JSX 路由配置
  • 使用 element={<Component />} 传递的路由组件
  • 没有数据路由，没有路由模块约定，也没有 loaders/actions

然后阅读 references/declarative-mode.md。

RSC Framework 和 RSC Data 模式

React Server Components 支持不稳定，且存在于 Framework 和 Data 两种变体中。当你看到以下内容时，使用 RSC 指南：

  • unstable_reactRouterRSC
  • @vitejs/plugin-rsc
  • unstable_RSCRouteConfig
  • RSC 入口文件，如 entry.rsc
  • ServerComponent、ServerErrorBoundary、ServerLayout 或 ServerHydrateFallback
  • React 指令或边界包，如 "use client"、"server-only" 或 "client-only"

对于 RSC Framework，请阅读 references/framework-mode.md 和 references/rsc.md。 对于 RSC Data，请阅读 references/data-mode.md 和 references/rsc.md。

以已安装文档为准

React Router 在包中附带 markdown 文档，以便指南与已安装版本匹配：

node_modules/react-router/docs/

关键文档路径：

node_modules/react-router/docs/index.md
node_modules/react-router/docs/start/
node_modules/react-router/docs/how-to/
node_modules/react-router/docs/explanation/
node_modules/react-router/docs/upgrading/

当本技能引用 react-router/docs/... 时，请阅读 node_modules/react-router/docs/ 下的对应文件。如果已安装版本不包含本地文档，在 React Router 仓库内工作时使用仓库的 docs/ 目录；在消费应用中，回退到与版本匹配的网站文档。

大多数文档在顶部附近包含模式标记：

[MODES: framework, data, declarative]

仅当文档的模式标记与应用模式匹配时才应用该文档。如果任务跨模式，优先使用与当前应用匹配的部分或文件。

RSC 主要记录在：

node_modules/react-router/docs/how-to/react-server-components.md

技能参考

确定模式后加载相关参考：

参考使用时机
references/framework-mode.mdFramework 模式或 RSC Framework 基础行为
references/data-mode.mdData 模式或 RSC Data 基础行为
references/declarative-mode.mdDeclarative 模式
references/rsc.md任何不稳定的 RSC 应用

模式迁移文档索引

如果用户明确要求切换模式，请阅读目标模式参考文档以及迁移相关文档：

迁移需阅读的文档
声明式 → 数据react-router/docs/start/modes.md、react-router/docs/start/data/routing.md、react-router/docs/start/data/data-loading.md、react-router/docs/start/data/actions.md
声明式/数据 → 框架react-router/docs/start/modes.md、react-router/docs/start/framework/routing.md、react-router/docs/start/framework/route-module.md、react-router/docs/how-to/route-module-type-safety.md
框架 SPA/SSR/预渲染变更react-router/docs/start/framework/rendering.md、react-router/docs/how-to/spa.md、react-router/docs/how-to/pre-rendering.md、react-router/docs/start/framework/data-loading.md、react-router/docs/start/framework/actions.md
未来标志/升级react-router/docs/upgrading/future.md 以及 react-router/docs/upgrading/ 下的相关文件

评论

支持 Markdown