React项目使用Router遇嵌套及useContext空值错误，求解决方案

错误原因分析 #

1. 多Router冲突：第一个错误提示说明你的应用中存在多个<Router>实例——大概率是根入口文件（比如index.js）里已经用BrowserRouter包裹了整个应用，而你又在Navbar组件里嵌套了另一个<Router>，react-router-dom要求整个应用只能有一个顶层路由上下文提供者。
2. 无Router上下文：删除Navbar里的<Router>后，<Link>、<Routes>这些组件脱离了路由上下文环境，它们必须在<Router>的包裹下才能访问路由相关的上下文数据，因此抛出basename解构失败的错误。

修复步骤 #

1. 确保Router仅在应用最顶层渲染 #

修改你的根入口文件（通常是index.js），将<Router>放在这里包裹整个应用，这是路由上下文的唯一提供者：

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router basename={process.env.PUBLIC_URL}>
    <App />
  </Router>
);

2. 重构Navbar组件 #

移除Navbar内部的<Router>和<Routes>，只保留导航链接部分——Navbar的职责是提供导航入口，不需要处理路由匹配：

import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import styles from "./Navbar.module.css";
import "bootstrap/dist/css/bootstrap.css";

const Navbar = () => {
  useEffect(() => {}, []);

  return (
    <header id="header" className="fixed-top">
      <div className="container d-flex align-items-center justify-content-between">
        <h1 className={styles.logo}>
          <Link to="/">Logo</Link>
        </h1>
        <nav id="navbar" className="navbar" style={{ padding: "0" }}>
          <ul className={styles.navbar_ul}>
            <li className={styles.navbar_li}>
              <Link to="/" className=" nav-link scrollto">
                Home
              </Link>
            </li>
            <li className={styles.navbar_li}>
              <Link to="/about" className="nav-link scrollto">
                About
              </Link>
            </li>
          </ul>
          <i className="bi bi-list mobile-nav-toggle"></i>
        </nav>
      </div>
    </header>
  );
};

export default Navbar;

3. 在App组件中配置路由 #

将路由匹配逻辑（<Routes>、<Route>）移到App组件中，和导航组件分离，保持代码结构清晰：

import React from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "./Navbar"; // 根据你的实际路径调整
import Hero from "./Hero";
import About from "../AboutSection/About";

const App = () => {
  return (
    <>
      <Navbar />
      {/* 路由匹配区域 */}
      <Routes>
        <Route path="/" element={<Hero />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  );
};

export default App;

核心逻辑说明 #

react-router-dom的设计模式是单一路由上下文：<Router>作为全局的路由状态提供者，只需要在应用最顶层存在一次，所有依赖路由功能的组件（如<Link>、useNavigate钩子等）都必须处于这个上下文范围内。同时，导航组件和路由匹配逻辑分离，能让代码结构更符合职责单一原则，也便于后续扩展路由规则。

内容的提问来源于stack exchange，提问作者Austn Yang