react-router-code-review

React Router 代码审查

快速参考

问题类型	参考资料
使用 useEffect 加载数据、缺少 loaders、参数	references/data-loading.md
Form 与 useFetcher、action 模式	references/mutations.md
缺少错误边界、errorElement	references/error-handling.md
navigate() 与 Link、待处理状态	references/navigation.md

审查清单

• 通过 loader 而非 useEffect 加载数据
• 以类型安全的方式访问路由参数，并进行验证
• 在适当情况下使用 defer() 并行获取数据
• 使用 <Form> 或 useFetcher 处理变更，而非手动 fetch
• Actions 同时处理成功和错误情况
• 路由上设置带有 errorElement 的错误边界
• 使用 isRouteErrorResponse() 检查错误类型
• 尽可能使用 <Link> 而非 navigate() 进行导航
• 通过 useNavigation() 或 fetcher.state 显示待处理状态
• 不在渲染期间进行导航（仅在 effects 或处理函数中导航）

有效模式（不要标记）

以下模式是正确使用 React Router 的方式——不要将其报告为问题：

• 对仅限客户端的数据使用 useEffect — Loaders 在服务端运行；localStorage、窗口尺寸和浏览器 API 必须使用 useEffect
• 在事件处理函数中使用 navigate() — Link 用于声明式导航；在回调/处理函数中进行命令式导航时，使用 navigate() 是正确的
• 对 loader 数据进行类型注解 — useLoaderData<typeof loader>() 是类型注解，不是类型断言
• 路由级别的空 errorElement — 路由可能有意依赖父级错误边界
• 不带 action 属性的 Form — 按惯例会提交到当前 URL；action 可选，无须显式指定
• loader 返回 null — 数据可能不存在时，这是有效做法；null 是合法的 loader 返回值
• 使用 fetcher.state 检查之前就读取 fetcher.data — 如果重新验证期间允许使用过期数据，这可能是有意为之

依赖上下文的规则

仅在具体上下文适用时标记以下问题：

问题	仅当以下条件成立时才标记
缺少 loader	数据可在服务端获取（并非仅限客户端）
使用 useEffect 获取数据	数据并非仅限客户端（localStorage、浏览器 API、窗口尺寸）
缺少 errorElement	层级结构中没有父级路由设置错误边界
使用 navigate() 而非 Link	导航并非由事件处理函数或条件逻辑触发

报告任何问题前的关卡

按顺序执行。每一关都必须有证据才能通过（路径、行号引用或一行代码摘录）——不能只凭直觉。

第 1 关 — 确定路由范围

通过条件： 找到拥有待审查行为的路由模块、routes 配置项或布局的仓库路径（标记问题前先记在笔记中）。

第 2 关 — 匹配上下文规则

通过条件： 对于符合依赖上下文的规则的每个问题，均满足其仅当以下条件成立时才标记，并提供结合代码的一行理由；对于其他清单项，则提供具体代码引用（路径 + 行号或简短摘录）。

第 3 关 — 排除非问题模式

通过条件： 该行为不属于此类别下的有效模式（不要标记）。

第 4 关 — 验证流程

加载并遵循 review-verification-protocol。通过条件： 对计划输出的每个问题，均完成报告前检查清单（以及适用的问题类型子章节）。

何时加载参考资料

• 审查数据获取代码 → data-loading.md
• 审查表单或变更 → mutations.md
• 审查错误处理 → error-handling.md
• 审查导航逻辑 → navigation.md

审查问题

1. 数据是否在加载器中加载，而不是在副作用中加载？
2. 是否使用 Form/action 模式处理变更？
3. 是否在适当的路由层级设置了错误边界？
4. 是否使用 Link 组件进行声明式导航？
5. 是否妥善处理了待处理状态？