React Router问题：<nav>未覆盖整个应用时组件无法渲染

问题现象 #

在 React TypeScript 项目中使用 React Router 时，点击<nav>内的链接无法正常渲染AddTask组件，只有当<nav>包裹整个应用时才能正常跳转。尝试移除<nav>包裹、替换为<div>/<Router>，或者<nav>不覆盖整个应用时，AddTask组件均无法显示。

错误原因 #

修改后的代码里**<Link>组件不在<Router>的上下文范围内**。React Router 的所有路由相关组件（比如Link、Routes、Route）必须统一包裹在同一个Router（如BrowserRouter）内部，否则Link无法识别路由上下文，点击后不会触发路由匹配，自然无法渲染目标组件。

另外，你提供的“可正常运行”的代码只是显示了导航栏，用的是普通<a>标签跳转到锚点#，并没有真正配置路由跳转逻辑，并非路由功能生效。

修复方案 #

将整个应用（包括<nav>和路由配置）统一包裹在Router组件内部，确保Link和Routes处于同一个路由上下文里。不需要让<nav>覆盖整个应用，只需让它和Routes同属Router的子元素即可。

修改后的正确代码 #

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.js';
import AddTask from './components/addtask';
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <nav className="navbar navbar-expand navbar-dark bg-dark">
            <div className="navbar-nav mr-auto">
              <Link to="/add" className="navbar-brand">Add</Link>
            </div>
          </nav>
          <Routes>
            <Route path="/add" element={<AddTask />} />
          </Routes>
        </div>
      </Router>
    );
  }
}

export default App;

额外注意事项 #

• 所有路由相关组件（Link、NavLink、Routes、Route，以及useNavigate等路由钩子）都必须在Router的包裹范围内，否则无法正常工作。
• 整个应用只需要一个顶层的Router，不要重复嵌套Router组件。

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