0
253
VistasReact-router no muestra nada en el navegador
Estoy tratando de crear una aplicación de reunión simple usando React. La estructura de carpetas es la siguiente: 
Dentro de AllMeetups.js:
function AllMeetupspage(){ return <div>AllMeetups</div> } export default AllMeetupspage;Dentro de Favoritos.js:
function Favouritespage(){ return <div>favourites</div> } export default Favouritespage;Dentro de Newmeetup.js,
function NewmeetupPage(){ return <div>Newmeetup</div> } export default NewmeetupPage;Dentro de App.js,
import { Route } from 'react-router-dom'; import AllMeetupspage from './pages/AllMeetups'; import NewmeetupPage from './pages/Newmeetup'; function App() { return ( <div> <Route path='/'> <AllMeetupspage /> </Route> <Route path='/new-meetup'> <NewmeetupPage /> </Route> </div> ); } export default App;Dentro de index.js,
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") );Quiero ver el contenido de la página de Allmeetups cuando cargo el navegador. Pero cuando cargo el navegador, no muestra nada. Soy nuevo en reaccionar y javascript. ¿Alguien podría decirme dónde me equivoqué?
3 Respuestas
Responde la pregunta0
Si está utilizando react-router @v6, debe reemplazar el component con el element
<Route path="/" element={<AllMeetupspage />} /> ... ...0
debe envolver sus rutas con el BrowserRouter (en la imagen de abajo se usa como enrutador) desde el react-router-dom para que el enrutamiento funcione. Creo que este es el problema en su código, lo siento si me equivoco.
P.ej:
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; const App = () => { return ( <> <Router> <Switch> <Route path="/" component={HomePage} /> </Switch> </Router> </> ); }; export default App;0
Si está utilizando la versión de react-router @ 5 o inferior, debe hacer
<Route exact path="/new-meetup" />
porque ambas rutas comienzan con "/" y siempre recurren a la primera, ya que no especifica que desea la coincidencia de URL completa. Básicamente, el parámetro exacto es algún tipo de expresión regular que dice que debe coincidir con la URL completa. De los documentos antiguos: https://v5.reactrouter.com/web/api/Route/exact-bool Con la versión @ 6 ya no es necesario, ya que el enrutador de reacción por defecto siempre buscará la ruta exacta.