修复在React路由器中没有元素的位置的匹配叶子路线的问题

136 阅读1分钟

在本教程中,我们将学习如何解决React路由器中"/"位置的匹配叶子路由没有元素的问题。

当我们试图在react router v6中使用以下语法创建一个路由时。

<Route path="/posts"  component={Posts}/>

我们会在控制台看到以下错误。

Matched leaf route at location "/" does not have an element.
This means it will render an <Outlet />
with a null value by default resulting in an "empty" page.

这个错误的发生是由于在Route组件中使用了component prop,这在react router v6中是不可用的。要解决这个错误,我们需要使用element prop而不是组件prop。

下面是一个例子。

<Route path="/posts"  element={<Posts/>}/>