tengo un AppBar y en el extremo derecho tengo un Menu con opciones, pero no he podido hacer que me lleve a algún lado al escoger una opción. Busque en ejemplos de código de material UI, veo varios menús pero en los ejemplos no llevan a ningún lado.
Encontré un ejemplo y lo fusioné con lo que tenía de material UI, pero usa enlaces subrayados, intenté quitarlos con css pero no resultó.
También intenté poniendo un history.push, pero al escoger esa opción, sale el mensaje de error: Cannot read property 'push' of undefined
const useStyles = makeStyles((theme) => ({
grow: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
inputRoot: {
color: 'inherit',
},
menuLink: {
textDecoration: 'none',
},
}));
export default function CustomLinkExample() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
let history = useHistory();
const isMenuOpen = Boolean(anchorEl);
const handleProfileMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
const handleClick = () => {
history.push("/Configuration");
};
const menuId = 'primary-search-account-menu';
const renderMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
id={menuId}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>
<OldSchoolMenuLink
activeOnlyWhenExact={true}
to="/"
label="Home"
/>
</MenuItem>
<MenuItem>
<OldSchoolMenuLink to="/about" label="About" className={classes.menuLink}/>
</MenuItem>
<MenuItem onClick={handleClick}>
Configuration
</MenuItem>
</Menu>
);
return (
<Router>
<div>
<div className={classes.grow}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h6" noWrap>
Material-UI
</Typography>
<div className={classes.grow} />
<div className={classes.sectionDesktop}>
<IconButton
edge="end"
aria-label="account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle />
</IconButton>
</div>
</Toolbar>
</AppBar>
{renderMenu}
</div>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/configuration">
<Configuration />
</Route>
</Switch>
</div>
</Router>
);
}
function OldSchoolMenuLink({ label, to, activeOnlyWhenExact }) {
let match = useRouteMatch({
path: to,
exact: activeOnlyWhenExact
});
return (
<div>
<Link to={to}>{label}</Link>
</div>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Configuration() {
return (
<div>
<h2>Configuration</h2>
</div>
);
}