React Router Dom首页仅加载单个组件其余未加载的问题求助

React Router v6 的 <Routes> 组件会按定义顺序匹配路由规则，只会渲染第一个匹配路径的 <Route> 组件。你为同一个 path="/" 定义了多个 <Route>，所以只有第一个对应的 <Headline/> 会被渲染，其余同路径的路由都会被忽略。

你需要把首页要加载的所有组件放在同一个 <Route> 的 element 属性中，有两种常用方式：

方式一：直接在路由中嵌套组件 #

修改首页的路由配置，用 React 片段（<>...</>）包裹所有需要渲染的组件：

import React from 'react'
import Navbar from './components/Navbar';
import About from './components/About';
import Headline from './components/Headline';
import Dishes from './components/Dishes';
import Investor from './components/Investor';
import Customer  from './components/Customer';
import Order  from './components/Order';
import Footer  from './components/Footer';
import './style.css';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>  
        {/* 把所有首页组件放在同一个element中 */}
        <Route path='/' element={
          <>
            <Headline />
            <Dishes />
            <Investor />
            <Customer />
            <Order />
            <Footer />
          </>
        } />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

方式二：封装独立的Home组件 #

如果首页组件较多，建议封装一个单独的 Home 组件，让路由配置更简洁：

1. 创建 src/components/Home.jsx：

import Headline from './Headline';
import Dishes from './Dishes';
import Investor from './Investor';
import Customer from './Customer';
import Order from './Order';
import Footer from './Footer';

export default function Home() {
  return (
    <>
      <Headline />
      <Dishes />
      <Investor />
      <Customer />
      <Order />
      <Footer />
    </>
  );
}

2. 修改 App.js：

import React from 'react'
import Navbar from './components/Navbar';
import About from './components/About';
import Home from './components/Home'; // 导入Home组件
import './style.css';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>  
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

补充：React Router v6 中默认就是精确匹配路由，exact 属性已经不再需要，可以直接移除。

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