位置“/”处匹配的叶路由没有元素。这意味着默认情况下它将使用空值呈现一个“空”页面
//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;
**我的任何react-router相关代码都不起作用，我不知道为什么当我开始在程序中插入一些路由时会发生这种情况，因此它显示此错误**
我有同样的错误，但我的修复略有不同，我拼错了元素。
<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.
在 V6 中，您不能再使用组件prop。它必须替换为元素
import './App.css';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from './pages/Home';
function App() {
return
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Home />}></Route>
</Routes>
</Router>
</div>;
}
export default App;
首先请react-router-dom从package.json文件中检查您的版本。如果它高于版本 6，您应该这样做。
import './App.css';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from './pages/Home';
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Home />}></Route>
</Routes>
</Router>
</div>
);
}
export default App;