React Router V6集成SPA遇无效Hook调用运行时错误求助

错误根源 #

你在代码中重复嵌套了路由上下文容器：

• Index.js 中已经用 <BrowserRouter> 包裹了整个应用
• App.js 又额外添加了 <Router>，而 <Router> 是底层路由组件，需要手动传入 history 对象才能正常工作，直接使用会触发无效 Hook 调用错误。

另外，App.js 里的子路由路径建议统一加上前缀 /（比如 /about），避免路径解析时出现异常。

修复方案 #

移除 App.js 中的 <Router> 组件，外层的 <BrowserRouter> 已经为整个应用提供了路由上下文，内部的 Navbar、Routes 等组件都能正常访问路由功能。

修改后的代码 #

Index.js（保持不变）

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

App.js（关键修改）

import React from "react";
import Navbar from "../components/Nav";
import Footer from "../components/Footer";
// 移除 Router 导入，仅保留 Routes、Route
import { Routes, Route} from "react-router-dom";
import About from "../pages/About";
import Home from "../pages/Home";
import Contact from "../pages/Contact";
import './styles/Styles.css';

export default function App() {
  return (
    <>
      <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      <Footer />
    </>
  );
}

其他文件（无需修改）

Navbar.js、Home.js 等文件代码保持原样即可，它们依赖的路由上下文已由外层的 <BrowserRouter> 提供。

验证修复 #

修改后重启开发服务器，应用应该能正常渲染，导航链接也能正确切换页面。如果仍有问题，可以尝试：

• 清除项目依赖重新安装：rm -rf node_modules package-lock.json && npm install
• 清空浏览器缓存后刷新页面

内容的提问来源于stack exchange，提问作者Regan Taigel