React Material-UI Cookbook

How it works...

Let's start by looking at the NavMenuItem component:

const NavMenuItem = ({ color, ...props }) => (  <Switch>    <Route      exact      path={props.to}      render={() => <MenuItem selected component={Link} {...props} />}    />    <Route      path="/"      render={() => <MenuItem component={Link} {...props} />}    />  </Switch>);

This will render a MenuItem component based on the current route. If the to property value matches the current route, then the selected property will be true—this is how the menu item appears to be selected when you open the menu. Next, let's look at the Menu markup:

<Menu  anchorEl={anchorEl}  open={Boolean(anchorEl)}  onClose={onClose}>  <NavMenuItem to="/" onClick={onClose}>    Home  </NavMenuItem> <NavMenuItem to="/page1" onClick={onClose}> ...