react-router-devtools

react-router-devtools 是一个开源工具包，旨在提升使用 React Router v7+（一个用于构建 Web 应用的全栈 JavaScript 框架）时的开发体验。该工具包提供了直观的用户界面，包含 活动页面、终端、设置、错误、网络 和 路由 六个标签页，以及一个名为 时间线 的侧边标签页。借助 react-router-devtools，您可以高效监控和管理 React Router v7+ 项目的各个方面，包括页面信息、URL 参数、服务器响应、加载器数据、路由等。

您还可以通过 错误 标签页追踪 hydration 问题，并通过 路由 标签页以树状/列表视图查看路由。

网络 标签页是一个强大的工具，用于追踪所有网络请求并了解底层运行情况。您可以实时查看所有请求，包括请求是否已中止、是否已缓存以及是否成功等状态。

Remix 开发工具

此仓库曾名为 remix-development-tools，但我们决定将其更名为 react-router-devtools，以更准确地反映它是适用于 React Router v7+ 的工具包，而非仅针对 Remix。

如果您需要该工具包的旧版本，可在 此处 找到。

详细文档可参见 此处。

文档

详细文档可在此处查看：

https://remix-development-tools.fly.dev/

快速开始

1. 通过 npm 安装此包：

npm install react-router-devtools -D

import { reactRouterDevTools } from "react-router-devtools";

// Add it to your plugins array in vite.config.js
export default defineConfig({
  plugins: [reactRouterDevTools(), reactRouter(), tsconfigPaths()],
});

好了，操作完成！

CloudFlare

如果您尝试在 CloudFlare 上启动项目，请尝试在 vite.config.js 文件的 optimizeDeps 中添加以下内容：

optimizeDeps: {
  include: [
    // other optimized deps
  ],
},

支持

如果您喜欢 react-router-devtools，不妨给仓库点个星，或者通过 Github 赞助进行捐赠。如有任何问题、意见或建议，欢迎随时联系我们！

许可证

react-router-devtools 是开源软件，基于 MIT 许可证 发布。

致谢

React Router Devtools 的灵感来源于 React Router v7，旨在为 React Router v7+ 用户提升开发体验。

欢迎探索 React Router Devtools，希望它能显著改善您的 React Router 开发流程。如果遇到任何问题或有功能增强建议，请随时在我们的 GitHub 仓库提交 issue。祝您开发愉快！

感谢

感谢所有为本项目做出贡献的开发者以及社区的支持。你们都太棒了！

---

谨以此献给我挚爱的妻子，以及我那“小夜猫子”Kiira——她最初通过陪伴我、充当我的“橡皮鸭”来帮助我构建这些工具，她永远是我最好的朋友。

深切缅怀我已故的祖父，他教会我要永远保持好奇、不断学习、对他人友善；也缅怀我已故的祖母，她总是鼓励我学习新事物，并为自己坚信的事情挺身而出。