• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

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

about 1 year ago · Santiago Trujillo
7 Respuestas
Responde la pregunta

0

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 />
about 1 year ago · Santiago Trujillo Denunciar

0

Very simple:

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

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

about 1 year ago · Santiago Trujillo Denunciar

0

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;
about 1 year ago · Santiago Trujillo Denunciar

0

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

about 1 year ago · Santiago Trujillo Denunciar

0

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;
about 1 year ago · Santiago Trujillo Denunciar

0

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.

about 1 year ago · Santiago Trujillo Denunciar

0

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.

about 1 year ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.