Matched leaf route at location "/" does not have an element
Javascriptnode.jsReactjsReact RouterJavascript Problem Overview
Matched leaf route at location "/" does not have an element. This means it will render an
//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;
**My any react router related code not working i don't know why it happend when i start insert some route in program so it show this error **
Javascript Solutions
Solution 1 - Javascript
In V6, you can't use the component prop anymore. It was replaced in favor of element:
<Route path="/" element={<Home />}></Route>
More info in the migration doc.
Solution 2 - Javascript
I had the same problem. Replace component with element and it worked.
Replace this:
<Route path="/" component={HomePage} exact />
with this:
<Route path="/" element={<HomePage/>} exact />
Solution 3 - Javascript
In V6, you can not use the component prop anymore. It must replaced for element
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;
Solution 4 - Javascript
I had the same error however my fix was slightly different I had spelled element wrong.
<Route exact path='/MyGames' elemtent={<MyGames/>}/>
and this was the error it gave me in the browser console
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.
Solution 5 - Javascript
in version 6:
component replaced with element and needs to close "</Route>"
<Route exact path="/" element={<AddTutorial />}></Route>
Solution 6 - Javascript
Very simple:
- use element instead of component
- wrap the your component like this: {
} instead of {Home}
<Route path="/" component={ <Home/> } />
Solution 7 - Javascript
Firstly please check your react-router-dom version from the package.json file.If it is above version 6 you should want do it like this.
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;
Solution 8 - Javascript
In react-router-dom 6+ we should use element instead of component
Error:
<Routes>
<Route exact path="/" component={<Home />} />
<Route exact path="/about" component={<About />} />
<Route exact path="/user" component={<User />} />
</Routes>
Solution:
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/about" element={<About />} />
<Route exact path="/user" element={<User />} />
</Routes>
Solution 9 - Javascript
If you're using react-router-dom 6 or above, you may have a routes array that includes parent and child routes. You may then try to open a route such as
/portal
and get this error because that component corresponds to a child route
/:customerid/portal
but you haven't read your routes (and their child routes) closely enough to see that.
Solution 10 - Javascript
This is a common problem if you are using react-router-dom V6 To solve this it's simple
In your code
Replace component with element
Replace {home} with {
This becomes...
This will definitely solve the problem.