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

Adding a couple of sources that helped me: [React Router v6](https://remix.run/blog/react-router-v6) and the corresponding [GitHub thread](https://github.com/remix-run/react-router/issues/8146#issuecomment-947860640) — willwrighteng, Nov 24 '22 at 08:48

score 354 · Answer 1 · answered Nov 05 '21 at 17:22

354

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.

answered Nov 05 '21 at 17:22

tavoyne

5,591
2
14
24

Thanks a lot! I could not solve this problem for a long time. Thanks to you, I successfully solved the problem! @tavoyne – Petr Fořt Fru-Fru Jul 02 '22 at 18:53
1

Its confusing because the `component` prop shows up in Typescript types for v6. – Nate-Wilkins Oct 28 '22 at 15:03
I wish this post were more visible, it took me a while to find it – willwrighteng Nov 24 '22 at 08:43
what if you are trying to pass props? Can you write it like this? ``()}>`` – Alex Antoine Jan 10 '23 at 22:06

score 69 · Answer 2 · edited Jan 10 '22 at 12:13

69

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

edited Jan 10 '22 at 12:13

Dara Java

2,410
3
27
52

answered Jan 09 '22 at 20:22

Anita Jayana

771
6
3

4

I want to pass a data to a function inside ``. How to do it? I tried, ` ( )}/>` 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 with a null value by default resulting in an "empty" page.` – Common Man Aug 16 '22 at 10:50
1

that's what I am trying to do but the data is not showing, only a blank screen. – Alex Antoine Jan 11 '23 at 18:13
1

@AlexAntoine & CommonMan either of you figure out how to do this.. I am trying to do the same thing with the render attribute. – Flak DiNenno Jan 22 '23 at 14:54

score 26 · Answer 3 · edited Apr 03 '23 at 19:39

26

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.

edited Apr 03 '23 at 19:39

Kalnode

9,386
3
34
62

answered Nov 26 '21 at 15:28

KathyB

261
2
3

You right, in current version component doesn't work, I used element and work for me – anderson j mariño o. Dec 21 '21 at 21:18
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! – Buğra Otken Jun 03 '22 at 11:31

score 21 · Answer 4 · edited Jun 30 '22 at 03:15

21

Very simple:

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

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

edited Jun 30 '22 at 03:15

Ryan M

18,333
31
67
74

answered Jan 01 '22 at 06:58

Adioz Daniel

339
1
5

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](/help/how-to-answer). – Community Jan 01 '22 at 09:42
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`. – Longblog Mar 02 '22 at 03:45
Accept this answer :) – Michael Wegter Aug 20 '23 at 18:06

PHP Hupp Technologies · Answer 5 · 2021-12-17T12:32:49.647

9

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

edited Dec 17 '21 at 12:32

answered Dec 17 '21 at 12:24

PHP Hupp Technologies

1,842
9
18

How do you pass params props in ``? – Common Man Aug 16 '22 at 10:53
what if you are trying to pass props? Can you write it like this? ```()}>``` – Alex Antoine Jan 11 '23 at 18:12

score 3 · Answer 6 · answered Jul 02 '23 at 17:37

3

Instead of

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

I used

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

to resolve my problem and now working fine.

answered Jul 02 '23 at 17:37

Kumaresh Chandra Baruri

61
1
8

Phestus · Answer 7 · 2023-04-16T15:11:06.117

2

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.

edited Apr 16 '23 at 15:11

answered Apr 03 '22 at 13:35

Phestus

31
3

score 0 · Answer 8 · answered Feb 24 '22 at 05:00

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.

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

8 Answers8

Linked

Related