React添加路由后页面空白，无法加载Navbar与Header组件

你的问题核心是默认访问根路径/时没有匹配到任何路由，导致Home组件（包含Header）无法渲染；另外需要确认Navbar组件本身是否正确输出内容。下面是具体的解决步骤：

1. 匹配根路径或添加重定向 #

方法一：让Home组件匹配根路径 #

修改App.jsx的路由配置，把Home绑定到/路径，这样打开页面就会直接加载Home：

import './App.css';
import Navbar from './components/Navbar/Navbar';
import Home from './pages/Home/Home'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Navbar />
      <BrowserRouter>
         <Routes>
           <Route path='/' element={<Home />} />
           <Route path='/home' element={<Home />} /> {/* 保留原/home路径 */}
         </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

方法二：根路径重定向到/home #

如果希望默认访问/时跳转到/home，可以使用Navigate组件：

import './App.css';
import Navbar from './components/Navbar/Navbar';
import Home from './pages/Home/Home'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Navbar />
      <BrowserRouter>
         <Routes>
           <Route path='/home' element={<Home />} />
           <Route path='/' element={<Navigate to="/home" />} />
         </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

2. 检查组件本身是否正常 #

• 确认Navbar组件是否正确返回JSX内容，比如有没有语法错误或者返回空值：

  // 示例正确的Navbar结构
  const Navbar = () => {
    return (
      <nav style={{ padding: '1rem', background: '#eee' }}>
        <h2>网站导航</h2>
      </nav>
    )
  }
  export default Navbar;
  

• 同样检查Header组件，确保它有实际的内容输出，而不是返回null或空标签。

3. 确认路由版本兼容性 #

你当前用的是react-router-dom v6的语法（Routes和Route），确保安装的是v6版本：

npm install react-router-dom@6

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