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 '

Ingrese la descripción de la imagen aquí

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.

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

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 element prop nuevo.

 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.

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

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

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;

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;

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 Version 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;