Empecé a aprender ReactJS ayer usando el curso intensivo de Academind para principiantes. Hay una parte donde enseña sobre react-router-dom . Intenté usarlo en App.js e index.js como tal:
Aplicación.js:
import { Route } from "react-router-dom"; import AllMeetupsPage from "./pages/AllMeetups"; import FavouritesPage from "./pages/Favourites"; import NewMeetupsPage from "./pages/NewMeetups"; function App() { return ( <div> <Route path='/'> <AllMeetupsPage /> </Route> <Route path='/favourites'> <FavouritesPage /> </Route> <Route path='/new-meetups'> <NewMeetupsPage /> </Route> </div> ); } export default App;índice.js:
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom' import './index.css'; import App from './App'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') );No debería haber ningún error ya que arreglé la sintaxis e importé los archivos correctos que aparecen en el video. Sin embargo, en localhost:3000 obtengo esto como resultado.
Si solo uso <AllMeetupsPage /> entonces funciona. Si lo pongo en la función de ruta, entonces no lo hace. ¿Cómo puedo arreglar esto?
prueba esto
import {Routes} from "react-router-dom" <Routes> <Route path='/'> <AllMeetupsPage /> </Route> <Route path='/favourites'> <FavouritesPage /> </Route> <Route path='/new-meetups'> <NewMeetupsPage /> </Route> </Routes>Cuando solo usa <AllMeetupsPage/> , está representando directamente ese componente de página en App.js.
En realidad no está haciendo ningún enrutamiento. Para usar múltiples, también debe envolverlo dentro de .
<div> <Routes> <Route path="/" element={<AllMeetupsPage />} /> <Route path="/favourites" element={<FavouritesPage />} /> <Route path="/new-meetups" element={<NewMeetupsPage />} /> </Routes> </div>Puede consultar el siguiente enlace para obtener más contexto del problema: [1]: ReactJS: [Home] no es un componente <Route>. Todos los componentes secundarios de <Routes> deben ser <Route> o <React.Fragment>