布局不是<route>成分。 的所有子组件<routes>必须是一个<route>或者<react.fragment> . 我应该如何克服这个错误？</react.fragment></route></routes></route>

Question

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

布局由 header 和页脚组成，我想将我的家包裹在布局中。
反应 18.1.0
反应路由器-dom 6.0.2

Answer 1

其他Route组件是Route组件的唯一有效子组件。 这是构建嵌套路由的用例。 对于路由内容/组件，这些必须使用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/>组件，并将布局作为道具提供给 Route，就像这样

<Route component={Layout} />

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