React Router Dom (v 6.4.3) 頁面在導航后變得無響應

Question

當我嘗試在我的組件中使用 useNavigate 或鏈接進行導航時，我的頁面變得無響應。 點擊按鈕或鏈接后，url會發生變化，目標組件內部的javascript會執行，但頁面不會重新渲染。 useNavigate 與我的應用程序中的其他組件一起工作，所以我不太確定問題出在哪里。 任何輸入將不勝感激！

儀表板.js：

import { useNavigate, Link } from "react-router-dom";

const Dashboard = () => {
  console.log("hello from dashboard");
  let navigate = useNavigate();
  return (
    <div>
      <Link className="pl-20" to="/test">
        test
      </Link>
    </div>
  );
};

export default Dashboard;

測試.js：

import React from "react";

const Test = () => {
  console.log("hello from test page");
  return <div>this is the test page</div>;
};

export default Test;

應用程序.js：

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Dashboard from "./pages/Dashboard";
import Test from "./pages/Test";


function App() {
  return (
    <>
      <Nav />
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </>
  );
}

顯示問題的 gif

Answer 1

你在儀表板上輸入了 pl-20 class。 但不在測試組件上。 請檢查。