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。 但不在测试组件上。 请检查。