在使用react router `react-router-dom`时，将多个组件分配给相同的路径（如 `path='/'`）会导致只有第一个匹配的组件被渲染。这是因为`routes`组件会查找并渲染第一个与当前url匹配的`route`。要解决此问题，应将所有需要在同一路径下显示的组件聚合到一个jsx片段中，作为单个`route`的`element`属性，或将其封装成一个独立的父组件。
理解React Router的路由匹配机制
在React应用中，react-router-dom库通过BrowserRouter、Routes和Route等组件来管理客户端路由。其中，Routes组件扮演着关键角色，它的主要职责是遍历其内部定义的Route组件，并渲染第一个与当前URL路径匹配的Route。
当开发者尝试为同一个路径（例如根路径 path='/'）定义多个Route组件时，例如：
}> }> }> {/* ...更多相同的路径 */} }>
在这种情况下，Routes组件会首先匹配到
解决方案一：将多个组件聚合到单个路由中
如果目标是在同一路径下同时显示多个组件，最直接的方法是将所有这些组件包裹在一个JSX片段（React.Fragment 或其简写 >）中，然后将这个片段作为单个 Route 的 element 属性值。
这种方法确保了 Routes 组件只匹配一个 Route，但该 Route 的 element 属性包含并渲染了所有预期的子组件。
示例代码：
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 (
{/* 使用React片段包裹所有组件 */}
);
}
export default App;注意事项：
- 使用 > (React.Fragment) 可以避免在DOM中引入额外的HTML元素，保持DOM结构整洁。
- 如果这些组件需要共享状态或逻辑，这种方法可能导致 element 属性变得冗长。
解决方案二：将多个组件封装成一个独立的父组件
为了提高代码的可读性、可维护性和复用性，更推荐的做法是将所有需要在同一路径下显示的组件封装到一个独立的父组件中。然后，将这个父组件作为单个 Route 的 element 属性值。
步骤：
-
创建 Home 组件： 创建一个名为 Home (或其他有意义的名称) 的新组件，并在其中渲染所有需要在首页显示的子组件。
// 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 = () => ( <>); export default Home; -
在 App 组件中使用 Home 组件： 在 App.js 中导入 Home 组件，并将其作为 path='/' 路由的 element。
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 (} /> {/* 使用 Home 组件 */} } />
优点：
- 代码整洁： App.js 中的路由配置更加简洁明了。
- 可维护性： 所有首页相关的组件逻辑和布局都集中在 Home 组件中，便于管理和修改。
- 可复用性： Home 组件可以在应用的其他部分（如果需要）被复用。
- 逻辑分离： Home 组件可以拥有自己的状态和生命周期方法，实现更好的逻辑分离。
总结
当使用 react-router-dom 配置路由时，务必理解 Routes 组件的工作原理：它只会渲染第一个匹配的 Route。因此，如果需要在同一个路径下显示多个组件，应该采取以下两种策略之一：
- 直接聚合： 将所有组件包裹在一个JSX片段中，作为单个 Route 的 element 属性。
- 封装组件： 创建一个独立的父组件来封装所有子组件，然后将这个父组件作为单个 Route 的 element 属性。
第二种方法通常是更推荐的实践，因为它能带来更好的代码组织、可读性和可维护性，尤其是在项目规模增大时。
