react-router-dom下Link无输出，NavBar导航链接不显示如何解决

问题原因 #

react-router-dom v6 的 <Routes> 组件仅允许 <Route> 作为直接子元素，你当前将包含 NavBar 的布局容器放在 <Routes> 内部，所有非 <Route> 的内容都会被直接过滤，不会渲染到页面上，这就是 NavBar 不显示的核心原因。

修复方案 #

调整 App.js 中标签的嵌套结构，把 <Routes> 移到仅包裹所有路由配置的位置，外层布局和 NavBar 放在 <Routes> 外部即可，修改后代码如下：

import Homepage from './Pages/Homepage';
import AboutPage from './Pages/AboutPage';
import ArticlesList from './Pages/ArticlesList';
import ArticlePage from './Pages/ArticlePage';
import NavBar from './NavBar';
import {Routes, Route} from 'react-router-dom';

import './App.css';

function App() {
  return (
    <div className="App">
      <NavBar />
      <div id="page-body">
        <Routes>
          <Route path="/" element={<Homepage />} />
          <Route path="/about" element={<AboutPage />}/>
          <Route path="/article-list" element={<ArticlesList />} />
          <Route path="/article" element={<ArticlePage />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

额外提示 #

你当前使用的是 v6 的测试版本，建议后续升级到 react-router-dom v6 正式版，API 稳定性更高，可避免很多测试版本遗留的兼容问题。

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