React Router运行时报错排查：简易导航栏开发问题

我想制作一个简易Navbar导航栏，对照React Router官方文档编写代码后，未发现明显问题，但出现了未捕获的运行时错误：

App组件代码 #

import './App.css';
import Dashboard from './component/dashboard';
import Home from './component/home';
import Navbar from './component/navbar';
import {BrowserRouter as Router,Routes,Route} from "react-router-dom"
function App() {
  return (
    <div className="App">
      <Navbar/>
      <div id="body">
      <Router >
        <Routes>
          <Route path="/"  element={<Home/>}/>
          <Route path="/dashboard"  element={<Dashboard/>}/>
        </Routes>
      </Router>
      
      </div>
    </div>
  );
}

export default App;

Navbar组件代码 #

import { NavLink } from "react-router-dom"
export default function Navbar(){
    return(<div className="App-header">
    <div id="logo">
      <p>logo</p>
      </div>
      <div id="nav_bar">
        <NavLink  to="/dashboard">dashboard</NavLink>
      </div>
      <div id="cantact_slide">
        <p>contact</p>
      </div>
</div>)
}

已安装依赖版本 #

• react-router-dom: ^6.11.2
• Node.js: v18.16.0

问题原因及修复方案 #

错误核心是**NavLink必须包裹在Router组件内部**，当前代码中Navbar在Router外部渲染，导致NavLink无法获取路由上下文。

修复只需将Router提升到Navbar的外层，确保所有路由相关组件都处于Router上下文内，修改后的App组件代码如下：

import './App.css';
import Dashboard from './component/dashboard';
import Home from './component/home';
import Navbar from './component/navbar';
import {BrowserRouter as Router,Routes,Route} from "react-router-dom"
function App() {
  return (
    <Router >
      <div className="App">
        <Navbar/>
        <div id="body">
          <Routes>
            <Route path="/"  element={<Home/>}/>
            <Route path="/dashboard"  element={<Dashboard/>}/>
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

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