Así que estaba siguiendo el curso acelerado de React en YouTube para principiantes de Academind. Estaba siguiendo todo y todo estaba bien hasta que llegué a la parte de enrutamiento. Seguí cada paso, todo perfectamente (para la parte de enrutamiento), pero después de actualizar la página, aparece el siguiente error:
Una
<Route>solo se debe usar como elemento secundario del elemento<Routes>, nunca se representa directamente. Envuelva su<Route>en un<Routes>.
Y lo hice, envolví mi Ruta en Rutas:
import { Route } from 'react-router-dom'; import AllMeetupsPage from './Pages/AllMeetups'; import NewMeetupsPage from './Pages/NewMeetups'; import FavoritesPage from './Pages/Favorites'; function App() { return ( <div> <Routes> <Route path='/'> <AllMeetupsPage /> </Route> <Route path='/new-meets'> <NewMeetupsPage /> </Route> <Route path='/favs'> <FavoritesPage /> </Route> </Routes> </div> ); } export default App;y luego me sale esto:
'Rutas' no está definida react/jsx-no-undef
entonces yo :
Intenté importar rutas desde react-router-dom - Sin éxito;
Intenté importar rutas desde react-router - Sin éxito;
Intenté importar Rutas también en diferentes componentes - Sin éxito;
Confía en mí, probé todos los escenarios diferentes para las rutas , pero no pude lograr nada diferente. yo
Busqué en Google, investigué y no pude encontrar la solución para este problema. Ahora estoy desesperado y atrapado aquí y no puedo continuar mi viaje de aprendizaje de React si no soluciono esto...
Bueno, la cuestión era que estaba siguiendo una guía para el antiguo react-router-dom;
Para arreglar eso, acabo de leer los nuevos documentos para react-router-dom@6;
No hay <Switch> ahora, en su lugar, envuelve su aplicación de esta manera:
ReactDOM.render( <Router> <App /> </Router>, document.getElementById("root") ); Luego, en el componente de la aplicación, envuelve su contenido en <Routes> y para cada ruta diferente usamos <Route> </Route> o simplemente <Route /> , depende de su proyecto.
Ahí está mi ejemplo, solo para ser más claro:
function App() { return ( <div> <MainNavigation/> <Routes> <Route path="/" element={<AllMeetups />}></Route> <Route path="/new-meetups" element={<NewMeetups />}></Route> <Route path="/favorites" element={<Favorites />}></Route> </Routes> </div> ); }1)npm i add react-router-dom; 2)import { BrowserRouter as Router, Routes, Route} from "react-router-dom"; 3)`function App() { return ( <Router> <Routes> <Route path='/dashboard' element={<Dashboard />} /> <Route path='/login' element={<Login/>} /> </Routes> </Router> ); }export default App;`Intente ejecutar yarn add react-router , luego import {Routes,Route} from 'react-router'