La ruta de hoja coincidente en la ubicación "/" no tiene un elemento. Esto significa que generará un valor nulo de forma predeterminada, lo que dará como resultado una página "vacía".
//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;** Mi código relacionado con el enrutador de reacción no funciona. No sé por qué sucedió cuando empiezo a insertar alguna ruta en el programa para que muestre este error **
Si está utilizando react-router-dom 6 o superior, es posible que tenga una matriz de rutas que incluya rutas principales y secundarias. A continuación, puede intentar abrir una ruta como
/portal
y sale este error porque ese componente corresponde a una ruta secundaria
/:customerid/portal
pero no ha leído sus rutas (y sus rutas secundarias) lo suficientemente cerca como para ver eso.
En V6, ya no puede usar el accesorio de component . Fue reemplazado a favor del element :
<Route path="/" element={<Home />}></Route>Más información en el documento de migración .
Tuve el mismo error, sin embargo, mi solución fue ligeramente diferente. Había escrito mal el elemento.
<Route exact path='/MyGames' elemtent={<MyGames/>}/>y este fue el error que me dio en la consola del navegador
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.
En V6, ya no puede usar el accesorio de componente . Debe ser reemplazado por elemento
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;En primer lugar, verifique su versión de react-router-dom desde el archivo package.json . Si está por encima de la versión 6, debería hacerlo así.
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;en la versión 6:
componente reemplazado con element y necesita cerrar "</Route>"
<Route exact path="/" element={<AddTutorial />}></Route>Muy simple:
<Route path="/" component={ <Home/> } />Yo tuve el mismo problema. Reemplace el componente con el elemento y funcionó.
Reemplace esto:
<Route path="/" component={HomePage} exact />con este:
<Route path="/" element={<HomePage/>} exact />