为何移除Router、Navbar相关代码后React页面的<h1>才显示？

你的问题核心是引入Router和Navbar后页面的<h1>Hi</h1>无法显示，大概率是以下几个原因，按顺序排查：

• Navbar组件存在渲染错误
  React组件如果在渲染时抛出异常，会导致整个组件树崩溃，连带其他内容也无法显示。先把<Navbar/>替换成简单内容（比如<div>测试导航</div>），如果此时Hi能正常显示，就去检查Navbar的代码：

  • 有没有语法错误（比如未闭合标签、变量未定义）
  • 是不是用了react-router-dom v5的API（比如useHistory）但当前安装的是v6版本（v6对应useNavigate）
  • 组件内部有没有无限循环、异步请求未处理的异常

• Route的写法存在两处错误
  React Router的路由path是基于根路径的绝对路径，不能写./Navbar这种相对路径格式；另外v6版本已经移除了exact属性（默认就是精确匹配），且你的Route没有指定element属性，属于无效写法。把Route改成正确格式：

  <Route path='/navbar' element={<Navbar />} />
  

• 版本兼容性问题
  确认你安装的react-router-dom版本是v6（因为你用了Routes组件，这是v6的特有写法），如果是v5版本，需要把Routes换成Switch，并且Route的写法也不同。可以通过命令npm list react-router-dom查看版本。

修正后的示例代码 #

import './App.css';
import Navbar from './Components/Navbar';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <div className='App'>
      <h1> Hi </h1>
      
      <Router>
        {/* 先替换成临时内容测试Navbar是否正常 */}
        {/* <Navbar/> */}
        <div>临时导航栏</div>
        <Routes>
          {/* 修正path并指定element */}
          <Route path='/navbar' element={<Navbar />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

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