react-router-devtools

react-router-devtools 是一個開源套件，旨在增強您在使用 React Router v7+（一個用於建構 Web 應用程式的全端 JavaScript 框架）時的開發工作流程。此套件提供了一個使用者友善的介面，包含三個標籤：Active Page（使用中頁面）、Terminal（終端機）、Settings（設定）、Errors（錯誤）、Network（網路）和 Routes（路由），以及一個側邊標籤 Timeline（時間軸）。使用 react-router-devtools，您可以有效率地監控和管理 React Router v7+ 專案的各個面向，包括頁面資訊、URL 參數、伺服器回應、載入器資料、路由等等。

您還可以使用 Errors（錯誤）標籤追蹤 hydration 問題，並使用 Routes（路由）標籤以樹狀/列表檢視方式查看您的路由。

Network（網路）標籤是一個強大的工具，可用於追蹤所有網路請求，並查看底層發生的情況。您可以即時查看所有請求，並能夠查看它們是否被中止、是否被快取，以及是否成功。

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。祝您 Remixing 愉快！

感謝

感謝這個專案的所有貢獻者以及對社群的支持。你們太棒了！

獻給我摯愛的妻子和我晚起的小鳥 Kiira，她陪伴著我，並擔任我的橡皮鴨，幫助我最初建構這些工具，她將永遠是我最好的朋友。

為了紀念我已故的祖父，他教導我永遠保持好奇心，永不停歇地學習，並永遠善待他人；以及我已故的祖母，她總是鼓勵我學習新事物，並為我所相信的事情挺身而出。