在本教程中,我们将学习如何解决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/>}/>