• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

187
Vistas
Error "Error: una <ruta> solo se debe usar como elemento secundario del elemento <rutas>"

Estoy tratando de usar el enrutamiento por primera vez y seguí las instrucciones exactas de Udemy :

Archivo App.js :

 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;

Archivo index.js

 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?

about 3 years ago · Santiago Trujillo
14 Respuestas
Responde la pregunta

0

Ahora, React usa "React Router Version 6".

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;
about 3 years ago · Santiago Trujillo Denunciar

0

Creo que hay muchos problemas que pueden conducir a ese problema.

  1. react-router-dom versión 6 ya no admite el uso de componentes directamente, use un elemento para especificar el componente que enruta.

  2. 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;

about 3 years ago · Santiago Trujillo Denunciar

0

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;
about 3 years ago · Santiago Trujillo Denunciar

0

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') );
about 3 years ago · Santiago Trujillo Denunciar

0

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>
about 3 years ago · Santiago Trujillo Denunciar

0

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.

about 3 years ago · Santiago Trujillo Denunciar

0

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;
about 3 years ago · Santiago Trujillo Denunciar

0

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 ).

Introduciendo Routes

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> ); }
about 3 years ago · Santiago Trujillo Denunciar

0

Sí, en la versión 6 de react-router-dom es un poco diferente. Mire por favor como la muestra abajo.

Tutorial del enrutador React

 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 );
about 3 years ago · Santiago Trujillo Denunciar

0

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.

about 3 years ago · Santiago Trujillo Denunciar

0

Utilizar:

 <div> <Header /> </div> <Routes> <Route path="/" element={<Home />} /> <Route path="/profile" element={<Profile />} /> <Route path="/about" element={<About />} /> </Routes>
about 3 years ago · Santiago Trujillo Denunciar

0

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;
about 3 years ago · Santiago Trujillo Denunciar

0

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.

about 3 years ago · Santiago Trujillo Denunciar

0

En la última versión de React, 'Switch' se reemplaza con ' Rutas ' y 'componente' se reemplaza con ' elemento '

Ingrese la descripción de la imagen aquí

about 3 years 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 vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda