react-router-dom路由异常：首页无法同时显示Header与Home组件

你的代码存在两个核心问题，导致无法同时显示Header和Home/Checkout组件：

1. 多余的<Routes>组件：每个<Routes>都是独立的路由匹配容器，同一路径下只会在各自容器内匹配第一个符合条件的<Route>，无法跨容器渲染多个组件。
2. 同路径多<Route>冲突：在同一个<Routes>内，相同路径的多个<Route>只会渲染优先级最高（排在最前面）的那个，不会同时渲染多个。

场景1：所有页面都需要显示Header #

直接将<Header>放在<Routes>外部，这样无论匹配哪个路由，Header都会全局渲染：

import './App.css';
import Header from './Header'
import Home from './Home'
import Checkout from "./Checkout"
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className='app'>
        {/* 全局Header，所有页面都会渲染 */}
        <Header />
        <Routes>
          <Route path="/" element={<Home />}/>
          <Route path="/checkout" element={<Checkout />}/>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

场景2：仅部分页面需要显示Header #

如果只有特定页面需要Header，可以将Header和对应内容组件放在同一个<Route>的element中，用React片段（<>）或div包裹：

import './App.css';
import Header from './Header'
import Home from './Home'
import Checkout from "./Checkout"
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className='app'>
        <Routes>
          <Route path="/" element={
            <>
              <Header />
              <Home />
            </>
          }/>
          <Route path="/checkout" element={
            <>
              <Header />
              <Checkout />
            </>
          }/>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

进阶方案：使用嵌套路由（推荐） #

如果后续页面结构更复杂，推荐用嵌套路由封装布局逻辑，复用Header组件：

// 先创建布局组件
import Header from './Header';

function Layout({ children }) {
  return (
    <>
      <Header />
      {children}
    </>
  );
}

// App组件中使用嵌套路由
import './App.css';
import Home from './Home'
import Checkout from "./Checkout"
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className='app'>
        <Routes>
          {/* 需要Header的页面都放在Layout路由下 */}
          <Route element={<Layout />}>
            <Route path="/" element={<Home />}/>
            <Route path="/checkout" element={<Checkout />}/>
          </Route>
          {/* 不需要Header的页面直接定义在外面 */}
          {/* <Route path="/login" element={<Login />}/> */}
        </Routes>
      </div>
    </Router>
  );
}

export default App;

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