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.0Y entonces tu código estará bien. O es mejor que reconstruya su código de acuerdo con el nuevo react-router-dom.