本文旨在解决react router dom中，当多个route配置了相同的路径时，仅第一个组件被渲染的问题。我们将深入探讨routes组件的匹配机制，并提供两种核心解决方案：将多个组件封装在一个jsx片段中作为单个route的元素，或创建一个独立的组合组件来管理多个子组件，以确保在同一url路径下按预期渲染所有目标组件。
理解React Router DOM的路由匹配机制
在使用React Router DOM构建单页应用时，我们经常需要根据URL路径来渲染不同的组件。BrowserRouter和Routes是实现这一目标的核心组件。其中，Routes组件负责遍历其内部的Route子组件，并找到与当前URL最匹配的一个。
一个常见的误解是，如果定义了多个Route组件，并且它们都具有相同的path属性（例如/），那么这些Route所对应的所有组件都会被同时渲染。然而，Routes组件的设计原则是“一次只渲染一个最佳匹配的路由”。这意味着，一旦Routes找到了第一个与当前URL匹配的Route，它就会渲染该Route对应的element，并停止进一步的匹配和渲染。
考虑以下示例代码：
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
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 About from './components/About';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route exact path='/' element={<Headline />}></Route>
<Route exact path='/' element={<Dishes />}></Route> {/* 此路由及后续路由将不会被匹配和渲染 */}
<Route exact path='/' element={<Investor />}></Route>
<Route exact path='/' element={<Customer />}></Route>
<Route exact path='/' element={<Order />}></Route>
<Route exact path='/' element={<Footer />}></Route>
<Route exact path='/about' element={<About />}></Route>
</Routes>
</Router>
);
}
export default App;在这段代码中，当访问根路径/时，Routes组件会首先匹配到
解决方案一：将多个组件组合到一个路由中
如果你的意图是在同一个URL路径下同时显示多个组件，那么正确的做法是将这些组件视为一个逻辑单元，并将它们全部包含在一个Route的element属性中。你可以使用JSX片段（...>）或者一个div元素来包裹这些组件。
这种方法确保了Routes组件只匹配并渲染一个Route，而这个Route的element内部包含了所有你希望在当前路径下显示的组件。
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
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 About from './components/About';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route
path='/' // 注意：这里不再需要exact，因为是唯一的匹配
element={(
<>
<Headline />
<Dishes />
<Investor />
<Customer />
<Order />
<Footer />
</>
)}
/>
<Route path='/about' element={<About />} />
</Routes>
</Router>
);
}
export default App;在这个示例中，当URL为/时，Routes会匹配到唯一的根路径Route。该Route的element是一个JSX片段，其中包含了Headline、Dishes、Investor、Customer、Order和Footer所有组件。这样，所有这些组件都会在主页上被同时渲染出来。
解决方案二：创建独立的组合组件
当需要组合的组件数量较多，或者这些组件形成一个独立的逻辑页面时，将它们封装到一个独立的函数组件中是一种更推荐的做法。这不仅提高了代码的可读性和可维护性，也使得路由配置更加简洁。
首先，创建一个新的组件（例如Home），将所有需要显示在主页上的子组件放置其中：
import React from 'react';
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';
// 定义一个组合组件 Home
const Home = () => (
<>
<Headline />
<Dishes />
<Investor />
<Customer />
<Order />
<Footer />
</>
);
export default Home; // 导出 Home 组件然后，在App组件中导入并使用这个Home组件作为根路径Route的element：
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';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path='/' element={<Home />} /> {/* 使用 Home 组合组件 */}
<Route path='/about' element={<About />} />
</Routes>
</Router>
);
}
export default App;这种方法使得App组件中的路由配置更加清晰，Home组件内部的复杂性被封装起来，提高了模块化程度。
注意事项与最佳实践
- 路由匹配唯一性： 始终记住Routes组件会寻找并渲染第一个匹配的Route。避免为同一路径定义多个独立的Route，除非你有意通过不同的exact或index属性来控制其优先级和行为。
- 组件逻辑聚合： 当多个组件在同一页面上共同构成一个逻辑单元时，应将它们封装起来。这可以通过JSX片段（...>）直接在Route的element中完成，或者通过创建一个独立的组合组件来完成。
- 代码可读性与维护性： 对于复杂的页面，推荐使用独立的组合组件（如Home组件）。这有助于保持App.js的简洁，并使页面组件更易于理解和维护。
- exact属性： 在React Router v6中，Routes组件的匹配算法已经非常智能，通常不再需要exact属性。Routes会根据路由的优先级和匹配程度自动选择最佳路由。只有在特定需要区分/和/something等情况时才需要考虑。在上述解决方案中，由于我们为/路径只配置了一个Route，因此exact属性的存在与否不会影响其行为。
总结
解决React Router DOM中相同路径只渲染一个组件的问题，关键在于理解Routes组件的“单匹配”原则。要在一个路径下渲染多个组件，必须将这些组件逻辑上组合成一个整体，作为单个Route的element。通过直接使用JSX片段或创建独立的组合组件，我们可以有效地管理和渲染复杂的页面结构，从而构建出功能完整且易于维护的React应用。
