Back to Details

react-router-code-review

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Router Code Review

React Router代码审核

Quick Reference

快速参考

Issue Type	Reference
useEffect for data, missing loaders, params	references/data-loading.md
Form vs useFetcher, action patterns	references/mutations.md
Missing error boundaries, errorElement	references/error-handling.md
navigate() vs Link, pending states	references/navigation.md

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

Review Checklist

审核检查清单

Data loaded via
```
loader
```
not
```
useEffect
```
Route params accessed type-safely with validation
Using
```
defer()
```
for parallel data fetching when appropriate
Mutations use
```
<Form>
```
or
```
useFetcher
```
not manual fetch
Actions handle both success and error cases
Error boundaries with
```
errorElement
```
on routes
Using
```
isRouteErrorResponse()
```
to check error types
Navigation uses
```
<Link>
```
over
```
navigate()
```
where possible
Pending states shown via
```
useNavigation()
```
or
```
fetcher.state
```
No navigation in render (only in effects or handlers)

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

Valid Patterns (Do NOT Flag)

有效模式（无需标记）

These patterns are correct React Router usage - do not report as issues:

useEffect for client-only data - Loaders run server-side; localStorage, window dimensions, and browser APIs must use useEffect
navigate() in event handlers - Link is for declarative navigation; navigate() is correct for imperative navigation in callbacks/handlers
Type annotation on loader data -
```
useLoaderData<typeof loader>()
```
is a type annotation, not a type assertion
Empty errorElement at route level - Route may intentionally rely on parent error boundary
Form without action prop - Posts to current URL by convention; explicit action is optional
loader returning null - Valid when data may not exist; null is a legitimate loader return value
Using fetcher.data without checking fetcher.state - May be intentional when stale data is acceptable during revalidation

以下是正确的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 - 在重新验证期间接受过时数据时，这可能是有意为之

Context-Sensitive Rules

上下文敏感规则

Only flag these issues when the specific context applies:

Issue	Flag ONLY IF
Missing loader	Data is available server-side (not client-only)
useEffect for data fetching	Data is NOT client-only (localStorage, browser APIs, window size)
Missing errorElement	No parent route in the hierarchy has an error boundary
navigate() instead of Link	Navigation is NOT triggered by an event handler or conditional logic

仅在特定上下文适用时标记这些问题：

问题	仅在以下情况标记
缺少loader	数据可在服务器端获取（非仅客户端）
使用useEffect加载数据	数据不是仅客户端数据（localStorage、浏览器API、窗口尺寸）
缺少errorElement	层级中没有父路由配置错误边界
使用navigate()而非Link	导航不是由事件处理器或条件逻辑触发

When to Load References

何时加载参考文档

Reviewing data fetching code → data-loading.md
Reviewing forms or mutations → mutations.md
Reviewing error handling → error-handling.md
Reviewing navigation logic → navigation.md

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

Review Questions

审核问题

Is data loaded in loaders instead of effects?
Are mutations using Form/action patterns?
Are there error boundaries at appropriate route levels?
Is navigation declarative with Link components?
Are pending states properly handled?

数据是否通过loaders而非effects加载？
变更操作是否使用Form/action模式？
适当的路由层级是否配置了错误边界？
是否使用Link组件进行声明式导航？
等待状态是否得到妥善处理？

Before Submitting Findings

提交发现前的步骤

Load and follow review-verification-protocol before reporting any issue.

在报告任何问题之前，请加载并遵循review-verification-protocol