React Route 渲染空白页面

Posted 2023-02-19

【中文标题】React Route 渲染空白页面

【英文标题】：React Route render blank page

【发布时间】：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>