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

Answer 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.

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

Answer 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.

Answer 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;

Answer 5

in version 6:

component replaced with element and needs to close "</Route>"

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

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

Answer 6

Very simple:

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

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

Answer 7

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;

Answer 8

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>

Answer 9

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.

Answer 10

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... <Route path="/" element={}>

This will definitely solve the problem.