0

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' introducir la descripción de la imagen aquí

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.

introducir la descripción de la imagen aquí

PD: No se si deberia usar mui para react, mejor que bootstrap.

0

2 respuestas 2

0

Me he creado esta solución, pero entiendo que no es la forma correcta :

import React, { useEffect, useState } from "react";
import { Nav, NavItem } from "react-bootstrap";
import { Link, NavLink, Outlet } from "react-router-dom";
import { LinkContainer } from "react-router-bootstrap";

const Menu = () => {
  const [currentUrl, setCurrentUrl] = useState("/usuarios");

  const handleSelect = (eventKey) => {
    console.log("event key");
    setCurrentUrl(eventKey);
  };

  useEffect(() => {
    const path = window.location.pathname;
    console.log("path = " + path);
    setCurrentUrl(path);
  }, [] );

  return (
    <div>
      <Nav fill variant="tabs" onSelect={handleSelect} defaultValue={currentUrl}>
        <NavItem>
          <Nav.Link
            as={Link}
            active={currentUrl == "/usuarios"}
            eventKey="/usuarios"
            to="/usuarios"
          >
            Lista de Usuarios
          </Nav.Link>
        </NavItem>
        <Nav.Item>
          <Nav.Link
            as={Link}
            active={currentUrl == "/usuarios/crear"}
            eventKey="/usuarios/crear"
            to="/usuarios/crear"
          >
            Crear Usuario
          </Nav.Link>
        </Nav.Item>
      </Nav>

      <main>
        <Outlet />
      </main>
    </div>
  );
};

export default Menu;

Si alguien pudiera asesorarme para una mejor solucion lo agradeceria

0

Veo que estas usando react-router , podrias usar el hook useLocation del mismo. Te comparto la documentacion: https://reactrouter.com/en/main/hooks/use-location

Adicionalmente un codigo de ejemplo que yo apliqué en mi proyecto:

import { Link, NavLink, useLocation } from 'react-router-dom';
const Header = ()=>{
 const location = useLocation();
 return (
 <ul>
  <li>
   <NavLink to="/users" className={location.pathname === '/users' ? 'active': ''}>Clases</NavLink>
  </li>
 </ul>
)
}
export default Header;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.