React Router Dom(v6.4.3)导航后页面无响应问题求助

我在组件中使用useNavigate或Link进行导航时，页面出现无响应情况。点击按钮或链接后，URL会变化，目标组件中的JavaScript代码也会执行，但页面并未重新渲染。useNavigate在应用的其他组件中可正常工作，不确定问题所在，恳请各位提供建议！

相关代码 #

Dashboard.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;

Test.js #

import React from "react";

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

export default Test;

App.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>
    </>
  );
}

问题演示 #

可行解决方案 #

• 修正BrowserRouter的包裹范围：你的App.js中仅导入了BrowserRouter但未用它包裹路由和导航组件，这会导致路由状态无法同步到组件渲染。修改后的App.js应该将所有路由相关内容纳入BrowserRouter上下文：

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

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

• 检查Nav组件的上下文：如果Nav组件包含导航逻辑，确保它也在BrowserRouter内部，否则导航行为无法触发页面更新。
• 验证React Router版本：若使用v6版本，确认所有路由API（如Routes、Route的写法）符合v6规范，v6与v5语法差异较大，混用会引发异常。

内容的提问来源于stack exchange，提问作者p-diddy10