CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-router
user16102215
user16102215

Reputation: 2011

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

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

Upvotes: 201

Views: 181577

Answers (9)

garaujo
garaujo

Reputation: 36

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.

Upvotes: 0

Kumaresh Chandra Baruri
Kumaresh Chandra Baruri

Reputation: 91

Instead of

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

I used

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

to resolve my problem and now working fine.

Upvotes: 6

Phestus
Phestus

Reputation: 31

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.

Upvotes: 2

KathyB
KathyB

Reputation: 281

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.

Upvotes: 28

Adioz Daniel
Adioz Daniel

Reputation: 516

Very simple:

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

Upvotes: 25

David
David

Reputation: 1121

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.

Upvotes: 0

Anita Jayana
Anita Jayana

Reputation: 861

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

Upvotes: 75

PHP Hupp Technologies
PHP Hupp Technologies

Reputation: 1952

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

Upvotes: 10

tavoyne
tavoyne

Reputation: 6559

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.

Upvotes: 390

Related Questions