位置“/”处匹配的叶路由没有元素

位置“/”处匹配的叶路由没有元素。这意味着它将在默认情况下呈现一个空值，从而产生一个“空”页面

//App.js File


import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
// import ReactDOM from "react-dom";




const App = () => {
return (


<Router >
<Routes>


<Route path="/" component={ Home }></Route>
</Routes>
</Router>




)
}


export default App;

我的任何反应路由器相关代码不工作，我不知道为什么它发生时，我开始插入一些路由程序，所以它显示这个错误

108368 次浏览
小开

在 V6中，你不能再使用 component道具了。它被取代了，取而代之的是 element:

<Route path="/" element={<Home />}></Route>

更多信息在 迁徙文件。

小开

我有相同的错误，但我的修复略有不同 我把元素拼错了。

<Route exact path='/MyGames' elemtent={<MyGames/>}/>

这是它在浏览器控制台给我的错误

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

小开

版本6:

元件替换为 element，并需要关闭 "</Route>"

 <Route exact path="/" element={<AddTutorial />}></Route>

Https://reactrouter.com/docs/en/v6/getting-started/overview

小开

很简单:

  1. 使用 element代替 component
  2. 像这样包装您的组件: {<Home/>}而不是 {Home}
<Route path="/" component={ <Home/> } />
小开

我也遇到过同样的问题，用元素代替元素，结果很有效。

取而代之的是:

<Route path="/" component={HomePage} exact />

用这个:

<Route path="/" element={<HomePage/>} exact />
小开

如果您使用的是 response-router-dom 6或更高版本，那么您可能有一个包含父路由和子路由的路由数组。然后，您可以尝试打开一个路由，如

/portal

并得到这个错误，因为该组件对应于一个子路由

/:customerid/portal

但是你还没有仔细阅读你的路线(和他们的孩子的路线) ，看到这一点。

小开

如果使用 response-router-dom V6，这是一个常见问题 要解决这个问题很简单

在你的代码里 用元素替换组件 将{ home }替换为{}

这变成了..。 < Route path = “/”element = {} >

这肯定能解决问题。


提交答案