1

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>
  );
}

1 respuesta 1

0

Así se solucionó:

 <MenuItem >
        <Link to='/Configuration' className="menuLink"> Configuration </Link>          
</MenuItem>

en los estilos:

.menuLink {
  text-decoration: none !important;  
}

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.