React 18中如何为多个Route复用同一个Div元素？

你遇到的错误是因为React Router 6要求<Route>必须作为<Routes>的直接子元素，不能嵌套在普通DOM组件里。要复用那个带test flex flex-col类名的div，不用重复编写，有两种可行方案：

方案一：封装通用布局组件 #

创建一个专门的布局组件，把重复的div结构封装进去，然后每个路由的element都用这个组件包裹对应的页面组件。

// 定义布局组件
const Layout = ({ children }) => {
  return <div className={`test flex flex-col`}>{children}</div>;
};

// 在路由中使用
<Routes>
  <Route path="route1" element={<Layout><HomeComponent /></Layout>} />
  <Route path="route2" element={<Layout><ChildComponent1 /></Layout>} />
  <Route path="route3" element={<Layout><ChildComponent2 /></Layout>} />
</Routes>

这种方式灵活度高，不管路由有没有共同的父路径都能使用，只需要在每个路由的element里用Layout包裹页面组件即可，完全避免重复编写div代码。

方案二：使用嵌套路由 + Outlet #

如果你的路由有统一的层级关系，可以用嵌套路由的方式，父路由的element渲染那个div容器，子路由通过<Outlet>来渲染具体页面内容。

// 父路由定义布局，子路由通过Outlet渲染内容
<Routes>
  <Route element={<div className={`test flex flex-col`}><Outlet /></div>}>
    <Route path="route1" element={<HomeComponent />} />
    <Route path="route2" element={<ChildComponent1 />} />
    <Route path="route3" element={<ChildComponent2 />} />
  </Route>
</Routes>

这里父路由可设置基础路径（或不设置路径作为全局容器），所有子路由都会自动渲染在父路由的div容器里，适合路由结构有统一层级的场景，代码更简洁。

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