mcpField
F
fix-bug

fix-bug

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

关于 fix-bug

Fix React Router Bug 是用于处理 React Router 仓库问题的技能，规定了从调查和复现问题，到先写测试再修复、验证、创建变更文件及提交 PR 的流程。

主要功能

  1. 01获取并分析 GitHub 问题
  2. 02验证复现并定位相关代码
  3. 03修复前添加失败测试
  4. 04运行测试、lint 和类型检查
  5. 05准备变更文件与 PR

适用场景

  1. 01调查已报告的路由器错误
  2. 02根据问题示例复现错误
  3. 03验证修复对不同路由模式的影响

安装

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

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

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

详细介绍

修复 React Router Bug

修复以下 GitHub issue 中报告的 bug：$ARGUMENTS

分支

Bug 修复应从干净的工作区开始。如果有更改，请提示我在继续之前解决它们。

Bug 应从 main 分支修复，在新分支上进行，分支名格式为 {author}/{semantic-branch-name}（例如 brophdawg11/fix-navigation）：

git branch {author}/{semantic-branch-name} main
git checkout {author}/{semantic-branch-name}

工作流

1. 获取并理解 Issue

使用 gh issue view <number> --repo remix-run/react-router 或 WebFetch 阅读完整的 issue。

提取：

  • Bug 描述以及预期行为与实际行为
  • React Router 版本和模式（Declarative / Data / Framework / RSC）
  • Issue 中的任何代码片段
  • 复现链接（StackBlitz、CodeSandbox、GitHub 仓库等）
2. 验证复现

如果有 StackBlitz/CodeSandbox/在线沙箱链接：

  • 使用 WebFetch 读取沙箱 URL 并提取相关代码
  • 确定触发该 bug 的确切事件序列

如果有 GitHub 仓库链接：

  • 使用 WebFetch 从 raw GitHub URL 读取关键文件（package.json、相关源文件）
  • 确定涉及的路由配置、loader、action 或组件

如果没有复现链接：

  • 使用 gh issue view <number> --repo remix-run/react-router --comments 搜索 issue 评论
  • 在评论中查找代码片段
  • 询问用户：“未提供复现。你能分享一个最小复现或粘贴相关代码吗？”
3. 定位受影响的代码

根据该 bug，找到相关源文件。查阅关键文件映射表：

区域文件
核心 router 逻辑packages/react-router/lib/router/router.ts
React 组件/hookspackages/react-router/lib/components.tsx, lib/hooks.tsx
DOM 工具packages/react-router/lib/dom/
Vite/Framework 插件packages/react-router-dev/vite/plugin.ts
RSCpackages/react-router/lib/rsc/

使用 Grep 和 Glob 追踪相关代码路径。

4. 编写失败的测试

单元测试（用于 router 逻辑、hooks、纯组件行为 — 无需构建）：

  • 位置：packages/react-router/__tests__/
  • 使用 Jest；运行方式：pnpm test packages/react-router/__tests__/<file>
  • 匹配附近测试文件的风格（describe/it 块、createStaticHandler、createMemoryRouter、render、screen 等）

集成测试（用于 Vite 插件、SSR、hydration、Framework 模式）：

  • 位置：integration/
  • 使用 Playwright，配合 createFixture() → createAppFixture() → PlaywrightFixture
  • 运行方式：pnpm test:integration:run --project chromium integration/<file>
  • 如有需要，先构建：pnpm test:integration --project chromium

编写测试以精确复现该 bug — 它必须在修复前失败。

运行它并确认失败：

pnpm test packages/react-router/__tests__/<file>  # unit
# or
pnpm test:integration:run --project chromium integration/<file>  # integration
5. 实现修复
  • 进行修复该 bug 所需的最小更改
  • 不要重构无关代码
  • 确认修复解决了根本原因，而不仅仅是症状
  • 考虑所有五种模式：此修复是否会破坏 Declarative / Data / Framework / RSC 中的任何内容？

再次运行失败的测试 — 它现在必须通过：

pnpm test packages/react-router/__tests__/<file>

运行更广泛的测试套件以检查回归：

pnpm test packages/react-router/

如果修复涉及 Framework/Vite 代码，也运行集成测试：

pnpm test:integration:run --project chromium

确认 lint 和类型检查通过：

pnpm lint
pnpm typecheck
6. 创建变更文件

在 packages/<package>/.changes/<type>.<unique-meaningful-name>.md 创建变更文件。<type> 应为 patch、minor、major 或 unstable 之一，以表明所做的 API 变更类型。

格式：

fix: <brief description of what was fixed>
7. 报告结果

总结：

  • 这个 bug 是什么，以及它为什么会发生
  • 更改了哪些代码，以及为什么
  • 测试现在已通过
  • 注意到的任何边界情况或相关问题

请我审查这些更改，并根据任何反馈进行迭代。

8. 提交 PR

一旦我批准修复，就提交更改并向 main 发起一个 PR。在描述中包含 Closes #NNNN，以将该 PR 链接到原始 issue。同时，在 Development 侧边栏中链接该 issue

评论

支持 Markdown