React Router Routes组件：解决单路径多组件渲染问题-js教程-PHP中文网

React Router Routes组件：解决单路径多组件渲染问题

聖光之護

发布： 2025-11-24 14:44:34

原创

892人浏览过

React Router Routes组件：解决单路径多组件渲染问题

本文旨在解决react router `routes`组件中，当多个`route`配置了相同的路径时，仅第一个组件被渲染的问题。文章将详细阐述`routes`组件的工作机制，并提供两种有效的解决方案：一是将所有需渲染的组件封装在一个react fragment中作为单个`route`的`element`，二是将这些组件进一步抽象为一个独立的复合组件，以提升代码的可读性和维护性。

在React应用中，我们常常利用react-router-dom库来管理页面的路由和导航。Routes组件是react-router-dom v6版本引入的核心组件，它的职责是遍历其子Route元素，并渲染与当前URL路径最匹配的第一个Route。当开发者尝试为同一路径（例如根路径/）配置多个Route时，往往会发现只有第一个匹配的组件被渲染，而后续的组件则无法显示。这并非react-router-dom的缺陷，而是其设计意图——确保每个路径只对应一个明确的视图。

理解 Routes 组件的工作原理

Routes组件的内部机制是，一旦找到一个与当前URL路径匹配的Route，它就会停止搜索并渲染该Route所对应的element。因此，如果存在以下代码结构：

<Routes>  
  <Route path='/' element={<Headline />}></Route>
  <Route path='/' element={<Dishes />}></Route>
  {/* ...更多相同路径的Route */}
</Routes>

登录后复制

在这种情况下，当路径为/时，Routes组件会首先匹配到<Route path='/' element={<Headline />}></Route>，并渲染<Headline />组件。此后，它将不再检查后续的Route，即使它们也配置了相同的路径。这就是导致“只有一个组件加载，其余不加载”现象的根本原因。

解决方案

要解决此问题，并实现在同一个路径下渲染多个组件，我们需要将所有目标组件逻辑上组合成一个单一的单元，然后将其作为单个Route的element。

方案一：使用React Fragment组合多个组件

最直接的方法是将所有需要在同一路径下渲染的组件包裹在一个React Fragment（<></> 或 <React.Fragment></React.Fragment>）中，然后将这个Fragment作为单个Route的element属性值。

示例代码：

import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
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';

function App() {
  return (
    <Router>
      <Navbar /> {/* Navbar通常是全局性的，不属于特定路由，放在Routes外部 */}
      <Routes>  
        <Route
          path='/'
          element={(
            // 使用React Fragment包裹所有需要在根路径下显示的组件
            <>
              <Headline />
              <Dishes />
              <Investor />
              <Customer />
              <Order />
              <Footer />
            </>
          )}
        />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

登录后复制

注意事项：

vizcom.ai

AI草图渲染工具，快速将手绘草图渲染成精美的图像

查看详情

path属性不再需要exact。在react-router-dom v6中，Routes组件默认采用最佳匹配策略，不再需要exact来精确匹配根路径。
Navbar组件通常是应用程序的全局导航，不应被包裹在特定的Route中，因为它应该在所有页面上都可见。因此，它被放置在Routes组件的外部。

方案二：将组件抽象为独立的复合组件

当需要在同一路径下渲染的组件数量较多时，直接在Route的element中写入一个大型的Fragment可能会导致代码变得冗长且难以阅读。更好的实践是将这些相关的组件封装到一个独立的React组件中，例如命名为Home或Dashboard，然后将这个复合组件作为Route的element。

步骤一：创建复合组件

// components/Home.jsx
import React from 'react';
import Headline from './Headline';
import Dishes from './Dishes';
import Investor from './Investor';
import Customer from './Customer';
import Order from './Order';
import Footer from './Footer';

const Home = () => (
  <>
    <Headline />
    <Dishes />
    <Investor />
    <Customer />
    <Order />
    <Footer />
  </>
);

export default Home;

登录后复制

步骤二：在 App 组件中使用复合组件

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

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>  
        <Route path='/' element={<Home />} /> {/* 将Home组件作为element */}
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

登录后复制

优点：