mcpField
R
react-router-v7

react-router-v7

github.com/existential-birds开发85573 次安装11 周前更新
代码仓库

关于 react-router-v7

面向使用 React Router v7 构建应用的开发者，提供路由、数据加载、变更操作和模式选择参考，并以实际决策点组织内容。

主要功能

  1. 01嵌套路由与动态路径段
  2. 02Framework、Data 和 Declarative 模式
  3. 03loader 与 useEffect 的选择指导
  4. 04Form 与 useFetcher 的选择指导
  5. 05数据加载与导航参考

适用场景

  1. 01为应用选择路由模式
  2. 02加载首屏渲染所需数据
  3. 03处理无需导航的行内变更
  4. 04配置嵌套和带参数的路由

安装

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

$npx skills add https://github.com/existential-birds/beagle --skill react-router-v7

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

包含的文件

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

ACTIONS.md
ADVANCED.md
LOADERS.md
NAVIGATION.md
references/
actions.md
advanced.md
loaders.md
navigation.md

详细介绍

React Router v7 最佳实践

快速参考

路由器设置（数据模式）：

import { createBrowserRouter, RouterProvider } from "react-router";

const router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    ErrorBoundary: RootErrorBoundary,
    loader: rootLoader,
    children: [
      { index: true, Component: Home },
      { path: "products/:productId", Component: Product, loader: productLoader },
    ],
  },
]);

ReactDOM.createRoot(root).render(<RouterProvider router={router} />);

框架模式（Vite 插件）：

// routes.ts
import { index, route } from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("products/:pid", "./product.tsx"),
];

路由配置

使用 Outlet 的嵌套路由
createBrowserRouter([
  {
    path: "/dashboard",
    Component: Dashboard,
    children: [
      { index: true, Component: DashboardHome },
      { path: "settings", Component: Settings },
    ],
  },
]);

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* Renders child routes */}
    </div>
  );
}
动态片段和通配符
{ path: "teams/:teamId" }           // params.teamId
{ path: ":lang?/categories" }       // Optional segment
{ path: "files/*" }                 // Splat: params["*"]

关键决策点

Form 还是 Fetcher

使用 <Form>：创建或删除数据并更改 URL、添加到历史记录
使用 useFetcher：内联更新、列表操作、弹出框——不更改 URL

Loader 还是 useEffect

使用 loader：在渲染前获取数据、在服务端获取数据、自动重新验证
使用 useEffect：仅限客户端的数据、依赖用户交互的数据、订阅

决策流程（按顺序判断）

按顺序回答。通过表示条件为真；选择同一行上的 API，然后停止。

<Form> 还是 useFetcher
  1. 是否必须更改 URL 或历史记录栈（需要加入书签／分享、返回操作回到上一屏幕）？
    • 通过 → <Form> / 路由 action（或 useSubmit + 导航）。停止。
    • 未通过 → 第 2 步。
  2. 是否在同一路由上执行变更（内联编辑、模态框、列表行，不更改地址）？
    • 通过 → useFetcher()。停止。
    • 未通过 → 重新检查第 1 步；你可能需要专用的 action 路由，或向当前 URL 发送 POST 请求。
loader 还是 useEffect
  1. 此路由是否需要数据才能正确完成首次渲染（或你计划使用的 <Suspense> 边界）？
    • 通过 → loader（框架模式：适用时使用 clientLoader）。停止。
    • 未通过 → 第 2 步。
  2. 是否仅在挂载后因用户操作、计时器或订阅而获取数据（而非进入路由时）？
    • 通过 → useEffect / 事件处理程序。停止。
    • 未通过 → 优先使用 loader + 重新验证，而不是使用与导航状态同步的 effect。

其他文档

模式对比

特性框架模式数据模式声明式模式
设置Vite 插件createBrowserRouter<BrowserRouter>
类型安全自动生成类型手动手动
SSR 支持内置手动有限
使用场景全栈应用可控的 SPA简单／旧版应用

评论

支持 Markdown