Estoy tratando de usar el enrutamiento por primera vez y seguí las instrucciones exactas de Udemy :
import { Route } from "react-router-dom"; import Welcome from "./Pages/Welcome"; import Game from "./Pages/Game"; import Leaderboard from "./Pages/Leaderboard"; function App() { return ( <div> <Route path = "/welcome"> <Welcome /> </Route> <Route path = "/game"> <Game /> </Route> <Route path = "/leaderboard"> <Leaderboard /> </Route> </div> ); } export default App;
import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from "./App"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') );
Obtuve el siguiente error:
Error: una ruta solo se debe usar como elemento secundario del elemento, nunca se representa directamente. Envuelva su ruta en una ruta.
¿Dónde me he equivocado?
Sí, en la versión 6 de react-router-dom es un poco diferente. Mire por favor como la muestra abajo.
import { render } from "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from "./App"; import Expenses from "./routes/expenses"; import Invoices from "./routes/invoices"; const rootElement = document.getElementById("root"); render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="expenses" element={<Expenses />} /> <Route path="invoices" element={<Invoices />} /> </Routes> </BrowserRouter>, rootElement );
Hubo un cambio bastante decente entre las versiones 5 y 6 de react-router-dom
. Parece que el curso/tutorial de Udemy está utilizando la versión 5, donde todo lo que necesitaba era un Router
para proporcionar un contexto de enrutamiento y los componentes de la Route
solo necesitaban representarse dentro de este contexto. Sin embargo, en la versión 6, los componentes Route
ahora deben representarse dentro de un componente de Routes
( que es una actualización del componente Switch
v5 ).
Uno de los cambios más emocionantes en v6 es el nuevo y poderoso elemento
<Routes>
. Esta es una actualización bastante significativa del elemento<Switch>
de v5 con algunas características nuevas importantes que incluyen enrutamiento y enlace relativos, clasificación automática de rutas y rutas y diseños anidados.
El mensaje de error es bastante claro, envuelva sus componentes de Route
en un componente de Routes
. Las rutas tampoco toman niños, representan los componentes como JSX en el nuevo element
prop.
function App() { return ( <div> <Routes> <Route path="/welcome" element={<Welcome />} /> <Route path="/game" element={<Game />} /> <Route path="/leaderboard" element={<Leaderboard />} /> </Routes> </div> ); }
El problema es su versión react-router-dom.
Probablemente sea 5.1 o superior.
Puedes probar (en la terminal):
npm install react-router-dom@5.3.0
Y entonces tu código estará bien. O es mejor que reconstruya su código de acuerdo con el nuevo react-router-dom.