React Route 渲染空白页面答案

【问题标题】：React Route render blank pageReact Route 渲染空白页面
【发布时间】：2022-01-23 22:54:37
【问题描述】：

这是代码截图。

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

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

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

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

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

【问题讨论】：

【解决方案1】：

react-router-dom v6 中的 Route 组件不再采用 component 或 render 属性；路由组件在 element 属性上呈现as JSX。

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

【讨论】：