Matched leaf route at location "/" does not have an element

Question

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

//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 **

Solution 1

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

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

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 4

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 5

Very simple:

1. use element instead of component
2. wrap the your component like this: {<Home/>} instead of {Home}

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

View more solutions

Comments

[anderson j mariño o.]

You right, in current version component doesn't work, I used element and work for me

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

[Longblog]

Hmm... what is the point of this change? Just to make it more explicit? Also as of version 6, you can't use component anymore, now you have to use element.

[Buğra Otken]

Thank you! My first reaction was "how can this be a solution, if you mistype 'element' than React should give you a proper error". But when I check my code i typed "elemenet" =) Thank you!

[Petr Fořt Fru-Fru]

Thanks a lot! I could not solve this problem for a long time. Thanks to you, I successfully solved the problem! @tavoyne