React Router v6.+版本如何在同路由下渲染多个组件元素？

v6版本中Route标签的element属性仅支持传入单个React节点，要实现同一路由下渲染多个组件，可参考以下两种常用方案：

方案1：直接用碎片/容器包裹组件 #

最简单的实现方式，直接用React.Fragment（简写为<></>）或者普通DOM容器包裹需要渲染的多个组件传入element即可，效果和旧版本完全一致：

// 用碎片包裹不会生成多余的DOM节点，无布局需求时推荐使用
<Route path="/" element={
  <>
    <Header />
    <Home />
  </>
} />

如果需要给页面加统一样式，也可以用div等容器包裹：

<Route path="/" element={
  <div className="page-wrapper">
    <Header />
    <Home />
  </div>
} />

注意：v6版本已经默认开启路由精准匹配，不需要额外加exact属性。

方案2：嵌套路由封装公共布局（多路由复用场景推荐） #

如果多个路由都需要共用Header等公共组件，可以用嵌套路由+Outlet做布局封装，避免每个路由重复写公共组件：

1. 首先封装公共布局组件

// Layout.jsx
import { Outlet } from 'react-router-dom'

function PublicLayout() {
  return (
    <>
      <Header />
      {/* 嵌套路由匹配到的组件会渲染在Outlet位置 */}
      <Outlet />
    </>
  )
}

2. 配置嵌套路由

<Route path="/" element={<PublicLayout />}>
  {/* index属性表示父路由路径匹配时默认渲染的子路由 */}
  <Route index element={<Home />} />
  {/* 其他需要共用Header的路由都可以放在这里 */}
  <Route path="about" element={<About />} />
  <Route path="list" element={<List />} />
</Route>

配置完成后，访问/路径时会同时渲染Header和Home，访问/about路径时会同时渲染Header和About，公共组件复用效率更高。

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