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?
Para React Router Versión 6 , su "index.js" es correcto:
índice.js :
import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from "./App"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') );
Pero su "App.js" no es correcto para React Router Versión 6 , por lo que este es el correcto a continuación:
* Cambié 3 partes como se muestra a continuación
aplicación.js :
// 1. "Routes" is imported import { Routes, Route } from "react-router-dom"; import Welcome from "./Pages/Welcome"; import Game from "./Pages/Game"; import Leaderboard from "./Pages/Leaderboard"; function App() { return ( <div> // 2. With "<Routes></Routes>", surround "3 <Route /> tags" <Routes> // 3. Put an element with a component to each "<Route />" <Route path = "/welcome" element={<Welcome />} /> <Route path = "/game" element={<Game />} /> <Route path = "/leaderboard" element={<Leaderboard />} /> </Routes> </div> ); } export default App;
Creo que hay muchos problemas que pueden conducir a ese problema.
react-router-dom versión 6 ya no admite el uso de componentes directamente, use un elemento para especificar el componente que enruta.
Route tiene que ser un elemento secundario de Routes
Utilice el fragmento simple
import logo from './logo.svg'; import './App.css'; import Navbar from './components/Navbar'; import {BrowserRouter, Routes, Route, Link} from 'react-router-dom'; import Homescreen from './screens/Homescreen'; function App() { return ( <div className="App"> <Navbar/> <BrowserRouter> <Routes> <Route path='/home' element={<Homescreen/>} /> </Routes> </BrowserRouter> </div> ); } export default App;
import React from 'react' import {BrowserRouter, Route, Routes } from 'react-router-dom' import './App.css'; import Navbar from './components/Navbar'; import { Home } from './components/screens/Home'; import { Login } from './components/screens/Login'; import { Profile } from './components/screens/Profile'; import { Signup } from './components/screens/Signup'; function App() { return ( <BrowserRouter> <Navbar /> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/signup" element={<Signup />} /> <Route path="/profile" element={<Profile />} />\ </Routes> </BrowserRouter> ); } export default App;
Hay otra forma de solucionar los problemas de versión:
Archivo App.js:
import { BrowserRouter, Route, Routes } from "react-router-dom"; import Welcome from "./Pages/Welcome"; import Game from "./Pages/Game"; import Leaderboard from "./Pages/Leaderboard"; function App() { return (<div> <BrowserRouter> <Routes> <Route path = "/Welcome" element={< Welcome/>}/> <Route path = "/Game" element={< Game/>}/> <Route path = "/LeaderBoard" element={< LeaderBoard/>}/> </Routes> </BrowserRouter> </div> ); } export default App;
Archivo index.js:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
El problema aquí es que estás usando React v5. Desde Reacty v6, se incluyeron varios cambios en Router. Así que ahora, para que funcione, y como dice su mensaje de error, debe envolver su elemento de ruta dentro de un elemento de rutas (Rutas ahora es la versión equivalente pero mejorada del elemento Switch). Además, debe agregar un accesorio de "elemento" que acepte JSX en lugar de envolverlo dentro del elemento Ruta. Entonces, para que funcione, debe importar todos estos elementos de esta manera:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
Dicho esto, su código debería verse así:
<Router> <Routes> <Route path="/" element={<Welcome/>}> </Route> <Route path="/" element={<Game />}> </Route> <Route path="/" element={<Leaderboard />}> </Route> </Routes> </Router>
En la versión más nueva de react-router-dom
, necesitamos anidar la Route
dentro de las Routes
. Además, el component
y exact
se han eliminado en la versión más reciente.
Intenta envolver tus rutas por Routes
:
import { Route, Routes } from "react-router-dom"; import Welcome from "./Pages/Welcome"; import Game from "./Pages/Game"; import Leaderboard from "./Pages/Leaderboard"; function App() { return ( <div> <Routes> <Route path = "/welcome"> <Welcome /> </Route> <Route path = "/game"> <Game /> </Route> <Route path = "/leaderboard"> <Leaderboard /> </Route> </Routes> </div> ); } export default App;
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> ); }
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 );
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.
Utilizar:
<div> <Header /> </div> <Routes> <Route path="/" element={<Home />} /> <Route path="/profile" element={<Profile />} /> <Route path="/about" element={<About />} /> </Routes>
Utilice la opción de elemento para configurar su componente en lugar de anidarlo en las etiquetas de ruta. Luego envuelva todas las rutas con <Routes></Routes>
.
No olvides agregar Rutas a tus importaciones
import { Route, Routes } from "react-router-dom"; import Welcome from "./Pages/Welcome"; import Game from "./Pages/Game"; import Leaderboard from "./Pages/Leaderboard"; function App() { return ( <div> <Routes> <Route path = "/welcome" element={<Welcome />}/> <Route path = "/game" element={<Game />}/> <Route path = "/leaderboard" element={<Leaderboard />}/> </Routes> </div> ); } export default App;
Probablemente se deba a que está utilizando la versión 6 o superior de react-router-dom. Pruebe: npm i react-router-dom@5.2.0
Y debería funcionar.
En la última versión de React, 'Switch' se reemplaza con ' Rutas ' y 'componente' se reemplaza con ' elemento '