Como puede ver en mi código, hay muchas ocasiones para activar <MenuItem onClick={()=>{closeMainMenu()}}> .
Por eso quiero ver si hay alguna forma de evitar este código repetitivo.
NarBar.js
import { ProSidebar, SidebarHeader, SidebarContent, Menu, MenuItem, SubMenu, } from "react-pro-sidebar"; import { Link } from "react-router-dom"; import "react-pro-sidebar/dist/css/styles.css"; import { useSelector, useDispatch } from "react-redux"; import { closeMenu } from "../../Redux/actions"; export default function NavBar(props) { const dispatch = useDispatch(); const showMenu = useSelector((state) => state.toggleMenu); const closeMainMenu = () => { dispatch(closeMenu()) } return ( <ProSidebar toggled={showMenu} onToggle={() => { closeMainMenu() }} breakPoint="md" > <SidebarHeader> <span>Proside Bar</span> </SidebarHeader> <SidebarContent> <Menu iconShape="square"> <MenuItem onClick={()=>{closeMainMenu()}}> Dashboard <Link to="/" /> </MenuItem> <MenuItem onClick={()=>{closeMainMenu()}}> General Information <Link to="/general-information" /> </MenuItem> <MenuItem onClick={()=>{closeMainMenu()}}> blog <Link to="/blogs" /> </MenuItem> <MenuItem onClick={()=>{closeMainMenu()}}> Users <Link to="/users" /> </MenuItem> </Menu> </SidebarContent> </ProSidebar> ); }¿Por qué no simplemente crear un componente?
const MenuLink = ({title, to}) => <MenuItem onClick={()=>{closeMainMenu()}}> {title} <Link to={to} /> </MenuItem>; return ... <SidebarContent> <Menu iconShape="square"> <MenuLink title="Dashboard" to="/" /> <MenuLink title="General Information" to="/general-information" /> <MenuLink title="blog" to="/blogs" /> <MenuLink title="Users" to="/users" /> </Menu> </SidebarContent>Si solo desea cerrar el menú cada vez que se hace clic en un enlace, puede crear un nuevo componente:
const CloseMenu = () => { const dispatch = useDispatch(); const {pathname} = useLocation(); useEffect(() => { dispatch(closeMenu()) }, [pathname]); return null; }; export default CloseMenu;y luego agréguelo al nivel superior de su enrutador. Luego, el menú se cerrará cada vez que cambie la ruta y no necesitará el clic.