react-router-devtools

react-router-devtools 是一个开源软件包，旨在增强您在使用 React Router v7+（一个用于构建 Web 应用程序的全栈 JavaScript 框架）时的开发工作流程。该软件包提供了一个用户友好的界面，由三个选项卡组成：活动页面、终端、设置、错误、网络和路由，以及一个名为时间线的侧边选项卡。借助 react-router-devtools，您可以高效地监控和管理 React Router v7+ 项目的各个方面，包括页面信息、URL 参数、服务器响应、加载器数据、路由等。

您还可以使用错误选项卡跟踪水合问题，并使用路由选项卡在树/列表视图中查看您的路由。

网络选项卡是一个强大的工具，用于追踪所有网络请求，并查看幕后发生的事情。您可以实时查看所有请求，并能够查看它们是否被中止、是否被缓存以及是否成功。

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

如果您尝试在 CF 上启动它，请尝试将此添加到 vite.config.js 文件中的 optimizeDeps 中

optimizeDeps: {
  include: [
    // other optimized deps
    "beautify",
    "react-diff-viewer-continued",
    "classnames",
    "@bkrem/react-transition-group",
  ],
},

支持

如果您喜欢 react-router-devtools，请考虑为仓库点赞或通过 Github 赞助进行捐赠。如果您有任何问题、意见或建议，请随时联系！

许可证

react-router-devtools 是根据 MIT 许可证发布的开源软件。

致谢

React Router Devtools 的灵感来自 React Router v7，旨在增强 React Router v7+ 用户的开发体验。

请随意探索 React Router Devtools，我们希望它能显着改善您的 React Router 开发过程。如果您遇到任何问题或有改进建议，请随时在我们的 GitHub 存储库上打开一个 issue。快乐地使用 Remix 吧！

感谢

感谢本项目的所有贡献者和对社区的支持。你们太棒了！

献给我深爱的妻子和我的小夜莺 Kiira，她通过陪伴我并充当我的橡皮鸭，帮助我最初构建了这些工具，她将永远是我最好的朋友。

深切缅怀我已故的祖父，他教会了我永远保持好奇心，永不停歇地学习，并始终善待他人；以及我已故的祖母，她总是鼓励我学习新事物，并为我所相信的事情挺身而出。