反应路线渲染空白页 [英] React Route render blank page

问题描述

这是代码屏幕截图。

我要呈现主页组件，但我要将其包装到这些MainLayout组件中。

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

所以我认为这也是一个语法问题，但是我做了研究，但是解决不了。我认为我应该更改此设置

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

有点喜欢较新的语法，但不知道如何使用。

推荐答案

react-router-domv6中的Route组件不再使用component或render道具；路由的组件在element道具上以jsx的形式呈现。

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

这篇关于反应路线渲染空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！