布局不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>。我应该如何克服这个错误？

Question

<Routes>
        <Route exact path='/'>
          <Layout>
            <Home></Home>
          </Layout>
        </Route>
      </Routes>

布局由页眉和页脚组成，我想把我的主页包裹在布局中。
响应 18.1.0
反应路由器-dom 6.0.2

Answer 1

其他 Route 组件是 Route 组件的唯一有效子组件。这是构建嵌套路由的用例。对于路由 content/components，这些必须使用 element 属性。

将 Layout 组件 渲染为 Route 组件的 element。

示例：

<Routes>
  <Route
    path='/'
    element={(
      <Layout>
        <Home />
      </Layout>
    )}
  />
</Routes>

让布局组件为嵌套路由呈现 Outlet 也很常见。

示例：

const Layout = () => (
  <>
    <Header />
    <Outlet />
    <Footer />
  </>
);

...

<Routes>
  <Route element={<Layout />}>
    <Route path='/' element={<Home />} />
  </Route>
</Routes>

Answer 2

您可以从那里提取 <Home/> 组件，然后像这样将布局作为 prop 提供给路由

<Route component={Layout} />

并在自己的 Layout 组件中提供您的 home 组件

Layout is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>. How should I overcome this error?