Question

0

176

Views

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

12 months ago · Santiago Trujillo

7 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-02-18T20:38:22.113Z

Very simple:

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

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

Answer 2 · 2022-02-18T20:38:22.364Z

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 · 2022-02-18T20:38:22.605Z

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 4 · 2022-02-18T20:38:22.933Z

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 5 · 2022-02-18T20:38:23.206Z

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 6 · 2022-02-18T20:38:23.613Z

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 7 · 2022-02-18T20:38:23.888Z

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.