使用React-Router-Dom v6与Bootstrap构建带导航栏单页应用时页面空白问题排查及解决

我看到你在使用React Router v6和Bootstrap构建带导航的页面时遇到了页面空白和路由匹配错误的问题，结合你给出的代码和错误提示，我来帮你拆解问题并给出修复方案：

核心错误分析 #

你遇到的两个控制台提示分别对应不同的问题：

1. "No routes matched location "/"：当Home文件在其他目录时，你设置的路由path='./pages/home'和访问的根路径/不匹配，导致没有对应的路由组件渲染。
2. "Matched leaf route at location "/" does not have an element..."：当文件在同一目录时，你在Route的element属性里写了错误的语法{</Home>}，这会导致React无法识别有效的组件，最终渲染null，页面空白。

另外要注意：React Router v6中已经移除了exact属性，因为v6的路由默认就是精确匹配的，不需要额外添加。

修复后的代码 #

修正后的App.jsx #

import '../../App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import React from "react";
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Home from './home';
import HeaderBar from '../layout/HeaderBar';

function App() {
  return (
    <Router >
      <div>
        <HeaderBar/>
        <Routes>
          {/* 修正1：path设为根路径"/"，对应访问首页 */}
          {/* 修正2：element属性里使用正确的组件语法<Home/> */}
          {/* 修正3：移除v6不再需要的exact属性 */}
          <Route path="/" element={<Home/>}></Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

其他需要确认的点 #

• 确保Home组件的文件名和引入路径一致：如果你的Home组件文件是home.jsx（小写h），那么import Home from './home';是正确的；如果是Home.jsx，需要改成import Home from './Home';（React项目中文件名大小写敏感）。
• 确认HeaderBar组件的引入路径正确，避免因为组件找不到导致页面异常。

验证修复 #

修改后重新启动项目，访问根路径/应该就能正常渲染Home组件的内容了。如果后续要添加更多页面，只需要在Routes里继续添加Route即可，比如：

<Routes>
  <Route path="/" element={<Home/>}></Route>
  <Route path="/about" element={<About/>}></Route>
</Routes>

内容的提问来源于stack exchange，提问作者Mir.Ebrahim Jafarpour Zonuzi