Acabo de comenzar con React y no puedo hacer que el enrutador funcione. A continuación se muestra el código para el enrutador. Si uso los componentes individuales sin el enrutador, se muestran en la pantalla. Pero con el enrutador no aparece ningún texto en la pantalla a través de ninguna de las rutas.
Por favor, avíseme si me estoy perdiendo algo. A continuación se muestra el código:
import { Route } from 'react-router-dom'; import AllMeetupsPage from './pages/AllMeetups'; import NewMeetupPage from './pages/NewMeetup'; function App() { return ( <div> <Route path='/' exact> <AllMeetupsPage /> </Route> <Route path='/new-meetup'> <NewMeetupPage /> </Route> </div>); } export default App;Una ruta debe ser descendiente del componente del enrutador. No estoy seguro de qué versión de react-router está usando, pero este será un componente BrowserRouter y Routes para react-router v6 y en v4/v5 será un BrowserRouter
He aquí algunos ejemplos:
v6:
import { BrowserRouter, Routes, Route } from "react-router-dom"; import AllMeetupsPage from './pages/AllMeetups'; import NewMeetupPage from './pages/NewMeetup'; function App() { return ( <div> <BrowserRouter> <Routes> <Route path="/" exact element={<AllMeetupsPage />}/> <Route path="/new-meetup" element={<NewMeetupPage />}/> </Routes> </BrowserRouter> </div>); } export default App;Te perdiste el uso del componente Switch
import { Route , Switch } from 'react-router-dom'; function App() { return ( <div> <Switch> <Route path='/' exact> <AllMeetupsPage /> </Route> <Route path='/new-meetup'> <NewMeetupPage /> </Route> </Switch> </div>); } export default App;