🚀🚀🚀惊了，React 居然还可以这么调试？前言上次介绍了 React 的插件，没想到广受好评，今天我们继续推荐

前言

上次介绍了 React 的插件，没想到广受好评，今天我们继续推荐一款 React 开发者工具：React Router DevTools

它是一个专为 React Router v7+ 开发工具，旨在提升开发者的调试和监控体验。

它提供了一个直观的界面！

往期精彩推荐

Active Route Segments

通过这些功能，开发者可以轻松监控页面信息、URL 参数、服务器响应、加载器数据、路由、水合问题和网络请求。

Event Timeline

Router

Hydration mismatch detector

正文

前提条件

在开始之前，请确保你的项目满足以下要求：

React Router 版本：必须使用 React Router v7.0 或更高版本。
模块系统：项目需要使用 ES Modules（ESM）。如果你的项目使用 CommonJS，你需要将其转换为 ESM，因为 Vite 的完整功能依赖于 ESM。

安装依赖

pnpm install react-router-devtools -D

步骤 2：配置 Vite

如果你使用 Vite 作为构建工具（推荐），需要在 vite.config.js 文件中添加插件：

import { defineConfig } from "vite";
import { reactRouterDevTools } from "react-router-devtools";
import { reactRouter } from "@remix-run/dev";
import { tsconfigPaths } from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [reactRouterDevTools(), reactRouter(), tsconfigPaths()],
});

reactRouterDevTools()：添加 DevTools 插件。
reactRouter()：React Router 的 Vite 插件，用于处理路由。
tsconfigPaths()：支持 TypeScript 路径别名（可选，但推荐）。

验证安装

完成配置后，运行开发服务器，然后你可以根据 Shift + A 打开或者关闭的面板！

当你在浏览器中想要查看某个组件的源代码时，可以按住 Shift 键并右键单击该组件。这将在代码编辑器中打开该组件的源代码！

最后

React Router DevTools 是一个功能强大的工具，可以显著提升 React Router 应用的调试效率。通过简单的安装和配置，你可以利用其选项卡功能监控页面状态、调试路由、跟踪网络请求和解决水合问题！

仓库：github.com/forge-42/re…

官网：react-router-devtools.forge42.dev