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

user_16102215 0
Viewed 93046

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

react-router reactjs node.js javascript
7 Answers

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.

user_92726670

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

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.

user_130354220

Very simple:

  1. use element instead of component
  2. wrap the your component like this: {<Home/>} instead of {Home}
<Route path="/" component={ <Home/> } />
user_105138510
user_96619480

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.

user_47700350

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.

user_186805820
Related