Hola que tal mi problema es el siguiente estoy haciendo un proyecto sencillo para practicar react, estoy utilizando el router, así como también Bootstrap, mi problema es que ya tengo el navbar funcionando y según lo que leí la documentación, hice buen uso del router pero al usarlo solo 2 de los 3 links funcionan, les adjunto mi código.
Dashboard.js (Aqui se encuentra el switch y las rutas a renderizar)
import React from 'react';
import Navbar from './Navbar';
import { Switch, Route } from 'react-router-dom';
import MemoriesCreate from '../memories/MemorieCreate';
import MemoriesScreen from '../memories/MemoriesScreen';
const Dashboard = () => {
return (
<>
<Navbar />
<Switch>
<Route exact path="/" component={ props => (
<h1>Hola mundo</h1>
)}
/>
<Route exact to="/subir-recuerdo" render={props => (
<MemoriesCreate {...props} />
)} />
<Route exact to="/recuerdos" component={MemoriesScreen}/>
</Switch>
</>
)
}
export default Dashboard;
Aqui tambien les dejo el codigo del navbar por si llego a tener algun error del que no me haya percatado.
import React from 'react';
import { Link } from 'react-router-dom';
const Navbar= () => {
return (
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<Link class="navbar-brand" to="/">NuestrosRecuerdos</Link>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<Link className="nav-link" to="/subir-recuerdo">
<button className="btn btn-primary">
Crear recuerdo
</button>
</Link>
<Link className="nav-link" to="/recuerdos">
<button className="btn btn-primary">
Ver recuerdos
</button>
</Link>
<a className="nav-link">
<button className="btn btn-danger">
Salir
</button>
</a>
</div>
</div>
</nav>
)
}
export default Navbar;
Los componentes no renderizan mas que el mismo nombre del componente y este es el resultado. Como ven la ruta inicial y la de subir recuerdo funcionan pero la de ver recuerdos muestra el mismo contenido que la de crear
ACTUALIZACIÓN Este es el componente en el que se encuentra el router
import React from 'react';
import Dashboard from './components/dashboard/Dashboard';
import { BrowserRouter as Router } from 'react-router-dom';
function App() {
return (
<div>
<Router>
<Dashboard />
</Router>
</div>
);
}
export default App;
Aquí están los componentes que intento renderizar en las distintas rutas. Como se ve en el código use useEffect para ver si el componente se montaba al presionar el botón y no, se monta el MemorieCreate no el MemorieScreen
import React, { useEffect } from 'react';
export default function MemorieCreate() {
useEffect(() => {
console.log('create montado')
})
return (
<h1>
Memorie Create
</h1>
)
}
import React, { useEffect } from 'react';
export default function MemoriesScreen() {
useEffect(() => {
console.log('componente montado')
}, [])
return(
<h1>
MemoriesScreen
</h1>
)
}