React Route 渲染空白页面

Question

这是代码截图。

我想渲染Homepage组件，但我想将其包装到这些MainLayout组件中。

问题是屏幕是空白的，终端中没有错误，但是当我检查页面时，它显示“位置“/”处的匹配叶路由没有元素”，所以我知道这是版本更新语法问题，因为我我在写作时遇到了同样的问题，component= {component }但语法已经改变，我应该写element={<component />}。

所以我相信这也是语法问题，但我已经做过研究但无法解决。我相信我应该改变这一点

/* ... */ render = {() => (
  <MainLayout>
    <Homepage />
  </MainLayout>
)}

有点新的语法，但不知道如何。

Answer 1

Routev6中的组件不再react-router-domtakecomponent或renderprops；element路由组件在prop上呈现为 JSX。

<Routes>
  ...
  <Route
    path="/"
    element={(
      <MainLayout>
        <Homepage />
      </MainLayout>
    )}
  />
  ...
</Routes>