惊了，React 居然还可以这么调试？

前言

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

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

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

Active Route Segments

Active Route Segments

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

路由

路由

Event Timeline

Event Timeline

Router

Router

Hydration mismatch detector

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 应用的调试效率。通过简单的安装和配置，你可以利用其选项卡功能监控页面状态、调试路由、跟踪网络请求和解决水合问题！

仓库：https://github.com/forge-42/react-router-devtools

官网：https://react-router-devtools.forge42.dev