使用react-router-dom添加Switch与Route后页面内容不显示问题求助

问题根因 #

• 你将<Navbar>非路由组件放在了<Switch>内部，<Switch>的逻辑是仅匹配并渲染第一个符合路径要求的<Route>或<Redirect>子元素，普通组件放在内部会打断路由匹配逻辑，导致页面内容无法正常加载。
• 若你安装的是react-router-dom@v6版本，该版本已废弃<Switch>组件、旧版component/children写法的<Route>，旧语法不兼容也会导致内容加载失败。

修复方案 #

方案1：适配react-router-dom v5版本 #

将<Navbar>移到<Switch>外部即可，修改后的App.js代码如下：

import './App.css';
import Navbar from './components/Navbar.js'
import HomeView from './components/HomeView.js'
import AboutView from './components/AboutView.js'
import {Switch, Route} from 'react-router-dom'

function App() {
  return (
    <div>
      {/* Navbar放在Switch外部，所有页面都展示导航栏 */}
      <Navbar/>
      <Switch>
        <Route path="/" exact>
          <HomeView/>
        </Route>
        <Route path="/about" component={AboutView}/>
      </Switch>
    </div>
  );
}

export default App;

方案2：适配react-router-dom v6版本 #

如果是v6版本，需要替换为v6对应的语法，修改后App.js代码如下：

import './App.css';
import Navbar from './components/Navbar.js'
import HomeView from './components/HomeView.js'
import AboutView from './components/AboutView.js'
import {Routes, Route} from 'react-router-dom'

function App() {
  return (
    <div>
      <Navbar/>
      <Routes>
        <Route path="/" element={<HomeView/>}/>
        <Route path="/about" element={<AboutView/>}/>
      </Routes>
    </div>
  );
}

export default App;

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