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

Selestina

Adding a couple of sources that helped me: React Router v6 and the corresponding GitHub thread – Taegu

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.

Inez

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

Its confusing because the component prop shows up in Typescript types for v6. – Mainsail

I wish this post were more visible, it took me a while to find it – Taegu

what if you are trying to pass props? Can you write it like this? <Route path="/" element={ props=>(<Home />)}></Route> – Messaline

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

Mog

I want to pass a data to a function inside <HomePage/>. How to do it? I tried, <Route exact path="/" render={ ( props ) => ( <ContactList { ...props } contacts={ contacts } getContactId={ removeContactHandler } /> )}/> but the page became blank with no errors but warning as, Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page. – Monah

that's what I am trying to do but the data is not showing, only a blank screen. – Messaline

@AlexAntoine & CommonMan either of you figure out how to do this.. I am trying to do the same thing with the render attribute. – Reginiaregiomontanus

Answer 3

I had the same error however my fix was slightly different I had spelled element wrong.

<Route exact path='/MyGames' element={<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.

Spirketing

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

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! – Hatchel

Answer 4

Very simple:

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

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

Setscrew

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. – Gyve

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. – Floria

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

Buzzell

How do you pass params props in <AddTutorial />? – Monah

what if you are trying to pass props? Can you write it like this? <Route path="/" element={ props=>(<Home />)}></Route> – Messaline

Answer 6

Instead of

<Route path='/about' component={About} />

I used

<Route path='/about' element={<About />} />

to resolve my problem and now working fine.

Crossrefer

Answer 7

This is a common problem if you are using react-router-dom V6 in your react app. To solve this it's simple

In your code Replace component with element Replace {home} with {<home/>}

This becomes... <Route path="/" element={<Home/>}></Route>

This will definitely solve the problem.

Abbasid

Answer 8

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.

Magus

Answer 9

For those who have reached this point while using a Route where you don't need an element, in my case, I opted to include a solitary "element".

<Routes>
    <Route exact path="/" element />
    <Route path="/about" element={<About />} />
</Routes>

In my case, I needed a route item but didn't need it to receive an element because the path I used only serves as an anchor for the same interface. I didn't need the route to load an element.

Intervenient