本教程旨在解决 react router dom 中同一路径下仅一个组件渲染的问题。核心在于理解 `routes` 组件的匹配机制，即每个路径只渲染一个匹配到的路由。文章将提供两种解决方案：将多个组件封装到单个 jsx 片段中，或创建一个专门的“首页”组件来统一管理和渲染所有相关组件，确保在指定路径下所有预期内容都能正确显示。
理解 React Router DOM 的路由匹配机制
在使用 React Router DOM 构建单页应用时，我们经常需要为不同的 URL 路径配置对应的组件。然而，一个常见的误区是，当多个
例如，以下代码片段展示了这个问题：
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 (
);
}
export default App;在这段代码中，所有以 path='/' 开头的
解决方案一：将多个组件封装到单个路由元素中
解决此问题最直接的方法是将所有需要在同一路径下显示的组件，作为一个整体封装到一个 JSX 片段中，然后将这个片段作为单个
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 (
{/* 使用 React 片段 (Fragment) 来包裹多个组件 */}
);
}
export default App;在这个示例中，我们使用了一个 React 片段 (...>) 来包裹所有需要在根路径 (/) 下显示的组件。这样，Routes 组件在匹配到 path='/' 时，会渲染这整个片段，从而确保所有组件都能被正确显示。
解决方案二：创建专门的“首页”组件进行封装
当需要在同一路径下渲染的组件数量较多，或者这些组件共同构成一个逻辑上的“页面”时，将它们封装到一个独立的组件中是一种更推荐的做法。这不仅能提高代码的可读性和可维护性，还能更好地组织项目结构。
首先，创建一个新的组件，例如 Home.js，将所有相关的子组件放置其中：
// components/Home.js
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 = () => (
<>
然后，在 App.js 中引入并使用这个 Home 组件：
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 (
);
}
export default App;这种方法使 App.js 中的路由配置更加简洁明了，将页面的具体内容实现细节隐藏在 Home 组件内部。当需要修改首页内容时，只需关注 Home.js 文件，而无需改动顶层路由配置。
注意事项与最佳实践
- React Router v6 中的 exact 属性： 在 React Router v6 中，Routes 组件内部的路由匹配逻辑已经得到优化。它会智能地选择“最佳”匹配，并且对于没有子路由的终端路由，exact 行为是默认的。因此，通常不再需要显式地使用 exact 属性。在上述解决方案中，即使移除 exact，效果也是一样的。
- 组件的职责分离： 尽量保持每个组件的职责单一。如果一个组件承载了过多的功能或渲染了过多的子组件，考虑将其拆分为更小的、可复用的组件。
- 可读性和维护性： 当同一路径下需要渲染的组件较多时，使用独立的封装组件（如 Home 组件）可以显著提高代码的可读性和维护性，避免 App.js 文件变得臃肿。
总结
当你在 React Router DOM 中遇到同一路径下只有第一个组件被渲染的问题时，这通常是因为 Routes 组件的路由匹配机制所致。解决方案是确保每个路径只对应一个
