Estoy aprendiendo a reaccionar y me quedé atascado en un problema. Empecé a trabajar en el enrutamiento, pero no funciona en absoluto.
Código:
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> <Route path = '/'> <AllMeetupsPage /> </Route> <Route path = '/new-meetup'> <NewMeetupsPage /> </Route> <Route path = '/favorites'> <FavoritesPage /> </Route> </div> ); } export default App;Tengo una pantalla en blanco aunque las páginas deberían cargarse. Cada página cuando está abierta solo debe imprimir una línea solo para ver que puedo ver el enrutamiento funcionando; sin embargo, todo lo que veo es un espacio en blanco, lo que significa que no funciona correctamente.
Puede ver el código completo aquí: https://github.com/Kroplewski-M/Routing
Debe envolver sus rutas con <BrowserRouter> que ya está hecho en el archivo de index , lo cual está bien. A continuación, las rutas deben envolverse con el componente <Routes> a partir de la última versión v6 de 'react-router-dom'
import { Routes, Route } from "react-router-dom"; function App(){ return ( <div> <Routes> <Route path="/" element={<AllMeetupsPage />} /> <Route path="/new-meetup" element={<NewMeetupsPage />} /> </Routes> </div> ); } export default App;Simplemente puede manejar el enrutamiento en su index.js de esta manera:
import { BrowserRouter, Route, Routes } from "react-router-dom"; ReactDOM.render( <div> <BrowserRouter> <Routes> <Route path="/" element={<AllMeetupsPage />} /> <Route path="/new-meetup" element={<NewMeetupsPage />} /> <Route path="/favorites" element={<FavoritesPage />} /> </Routes> </BrowserRouter> </div>, document.getElementById("root") );No está envolviendo la ruta debajo del enrutador , es por eso que su ruta no funciona.
Aquí está el código.
import {Router,Route} from 'react-router-dom' import AllMeetupsPage from './pages/AllMeetups'; import NewMeetupsPage from './pages/NewMeetups'; import FavoritesPage from './pages/Favorites'; function App() { return ( <div> <Router> <Route path = '/'> <AllMeetupsPage /> </Route> <Route path = '/new-meetup'> <NewMeetupsPage /> </Route> <Route path = '/favorites'> <FavoritesPage /> </Route> </Router> </div> ); } export default App;Espero que funcione.