tengo mi menu :
import React from "react";
import { Nav } from "react-bootstrap";
import { Link, NavLink, Outlet } from "react-router-dom";
const Menu = () => {
const clickNav = ()=>{
console.log('click navbar !');
}
return (
<div>
<Nav fill variant="tabs" defaultActiveKey={'/usuarios'}>
<Nav.Item>
<Nav.Link as={Link} eventKey={'/usuarios'} to='/usuarios' >Lista de Usuarios</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link as={Link} eventKey={'/usuarios/crear'} to='/usuarios/crear' >Crear Usuario</Nav.Link>
</Nav.Item>
</Nav>
<main>
<Outlet/>
</main>
</div>
);
};
export default Menu;
Y este es mi app.js:
import "./App.css";
import { Route, Routes } from "react-router-dom";
import Menu from "./components/Menu";
import CrudUsuario from "./components/CrudUsuario";
import ListaUsuario from "./components/ListaUsuario";
function App() {
return (
<Routes>
<Route path="/" element={<Menu/>}>
<Route exact path="/usuarios" element={<ListaUsuario/>}/>
<Route exact path="/usuarios/crear" element={<CrudUsuario/>}/>
</Route>
</Routes>
);
}
export default App;
Buscando por ahi encontre que poniendo el as
en la clase de bootstrap se arregla la funcionalidad del router, pero el problema que veo es que si por ejemplo clicko en 'crear usuario'
Me lleva al crud de user correctamente. Pero si hago un f5 despues, la url se mantiene bien, pero en el menu me dice que esta activo : Lista de Usuarios. Y es mentira, puesto que el componente cargado es el crud, y eso si es correcto.
PD: No se si deberia usar mui para react, mejor que bootstrap.