title: Highlighting Menus in React
body: <p>I have implemented a menu item in React and i have successfully highlighted if a menu is on that specific URL. My problem is when i'm on the inner part of that Menu. For example I have a menu called "Pending Orders" and it is highlighted while If I'm on the "Pending Orders View", the highlighted part disappears. I think its on this code <code>selected={location.pathname === obj.url}</code>. What will be the best way to fix this?</p>
  
  <p><strong>SideNav</strong></p>
  
  <pre><code>  function SideNav(props) {
    const { window, location } = props;
    const classes = useStyles();
    const theme = useTheme();
    const [mobileOpen, setMobileOpen] = React.useState(false);
    const [loggedOut, isLoggingOut] = React.useState(false);
    const dispatch = useDispatch();
    const history = useHistory();
    const isStaff = useSelector((state) =&gt; state.auth.is_staff);
    const firstName = useSelector((state) =&gt; state.auth.first_name);
    const lastName = useSelector((state) =&gt; state.auth.last_name);
    const [openMenuID, setOpenMenuID] = React.useState(null);
    const [open, setLogoutDialogOpen] = React.useState(false);
  
    const openLogoutDialog = () =&gt; {
      setLogoutDialogOpen(true);
    };
  
    const closeLogoutDialog = () =&gt; {
      setLogoutDialogOpen(false);
    };
  
    const toggleOpenMenu = (menuId) =&gt; {
      if (openMenuID === menuId) {
        setOpenMenuID(null);
      } else {
        setOpenMenuID(menuId);
      }
    };
  
    const handleDrawerToggle = () =&gt; {
      setMobileOpen(!mobileOpen);
    };
  
    const signOut = () =&gt; {
      dispatch(logout());
      isLoggingOut(true);
    };
  
    if (loggedOut) {
      return &lt;Redirect to={{ pathname: '/login', state: { referer: props.location } }} /&gt;;
    }
  
    const menuItems = [
      {
        id: 1,
        text: 'Orders',
        submenu: [
          {
            id: 1.1,
            text: 'Pending',
            url: '/orders/pending',
          },
          {
            id: 1.2,
            text: 'Approved',
            url: '/orders/approved',
          },
          {
            id: 1.3,
            text: 'Declined',
            url: '/orders/declined'
          },
        ],
      },
      {
        id: 2,
        text: 'Registration',
        url: `/registration`
      }
    ].map((obj, index) =&gt;
      (obj.userAccess === false &amp;&amp; isStaff) || obj.userAccess === true ? (
        &lt;React.Fragment key={index}&gt;
          &lt;ListItem
            button
            selected={location.pathname === obj.url}
            key={obj.id}
            onClick={() =&gt; {
              if (obj.submenu) {
                toggleOpenMenu(obj.id);
              } else {
                setOpenMenuID(null);
                setMobileOpen(false);
                props.history.push(obj.url);
              }
            }}
          &gt;
            &lt;ListItemIcon&gt;{obj.icon}&lt;/ListItemIcon&gt;
            &lt;ListItemText
              disableTypography
              primary={
                &lt;Typography type="body1" style={{ color: '#FFFFFF' }}&gt;
                  {obj.text}
                &lt;/Typography&gt;
              }
            /&gt;
            {obj.submenu ? openMenuID === obj.id ? &lt;ExpandLessIcon /&gt; : &lt;ExpandMoreIcon /&gt; : null}
          &lt;/ListItem&gt;
          {obj.submenu ? (
            &lt;Collapse in={openMenuID === obj.id} timeout="auto" unmountOnExit&gt;
              &lt;List component="div" disablePadding&gt;
                {obj.submenu.map((subobj, index) =&gt; (
                  &lt;ListItem
                    selected={location.pathname === subobj.url}
                    button
                    key={subobj.id}
                    className={classes.nested}
                    onClick={() =&gt; {
                      setMobileOpen(false);
                      props.history.push(subobj.url);
                    }}
                  &gt;
                    &lt;ListItemIcon&gt;{subobj.icon}&lt;/ListItemIcon&gt;
                    &lt;ListItemText
                      disableTypography
                      primary={
                        &lt;Typography type="body1" style={{ color: '#FFFFFF' }}&gt;
                          {subobj.text}
                        &lt;/Typography&gt;
                      }
                    /&gt;
                  &lt;/ListItem&gt;
                ))}
              &lt;/List&gt;
            &lt;/Collapse&gt;
          ) : null}
        &lt;/React.Fragment&gt;
      ) : (
        ''
      )
    );
  
    const drawer = (
      &lt;div&gt;
        &lt;Divider /&gt;
        &lt;div className={classes.headerIcon}&gt;
          &lt;AccountCircleIcon fontSize="large" /&gt;
        &lt;/div&gt;
        &lt;h2 className={classes.headerName}&gt;
          {firstName ? firstName : 'no name'} {lastName ? lastName : ''}
        &lt;/h2&gt;
        &lt;p className={classes.headerRole}&gt;{isStaff ? 'Admin' : 'User'}&lt;/p&gt;
        &lt;Divider /&gt;
        &lt;List&gt;{menuItems}&lt;/List&gt;
        &lt;Divider /&gt;
      &lt;/div&gt;
    );
  
    const container = window !== undefined ? () =&gt; window().document.body : undefined;
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;CssBaseline /&gt;
        &lt;AppBar position="fixed" className={classes.appBar}&gt;
          &lt;Toolbar&gt;
            &lt;IconButton
              color="inherit"
              aria-label="open drawer"
              edge="start"
              onClick={handleDrawerToggle}
              className={classes.menuButton}
            &gt;
              &lt;MenuIcon /&gt;
            &lt;/IconButton&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
        &lt;nav className={classes.drawer} aria-label="mailbox folders"&gt;
          &lt;Hidden smUp implementation="css"&gt;
            &lt;Drawer
              container={container}
              variant="temporary"
              anchor={theme.direction === 'rtl' ? 'right' : 'left'}
              open={mobileOpen}
              onClose={handleDrawerToggle}
              classes={{
                paper: classes.drawerPaper,
              }}
              ModalProps={{
                keepMounted: true,
              }}
            &gt;
              {drawer}
            &lt;/Drawer&gt;
          &lt;/Hidden&gt;
          &lt;Hidden xsDown implementation="css"&gt;
            &lt;Drawer
              classes={{
                paper: classes.drawerPaper,
              }}
              variant="permanent"
              open
            &gt;
              {drawer}
            &lt;/Drawer&gt;
          &lt;/Hidden&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    );
  }
  
  SideNav.propTypes = {
    window: PropTypes.func,
  };
  
  export default withRouter(SideNav);
  </code></pre>
  
  <p><strong>Menu</strong></p>
  
  <pre><code>&lt;ListItem
    button
    selected={location.pathname === obj.url}
    key={obj.id}
    onClick={() =&gt; {
      if (obj.submenu) {
        toggleOpenMenu(obj.id);
      } else {
        setOpenMenuID(null);
        setMobileOpen(false);
        props.history.push(obj.url);
      }
    }}
  &gt;&lt;/ListItem&gt;;
  </code></pre>
  
  <p><strong>Routes</strong></p>
  
  <pre><code>&lt;Switch&gt;
    &lt;PrivateRoute
      path={`${url}orders/approved/:id`}
      component={ViewOrder}
    /&gt;
    &lt;PrivateRoute
      path={`${url}orders/approved`}
      component={ApprovedOrders}
    /&gt;
    &lt;PrivateRoute
      path={`${url}orders/declined/:id`}
      component={ViewOrder}
    /&gt;
    &lt;PrivateRoute
      path={`${url}orders/declined`}
      component={DeclinedOrders}
    /&gt;
    &lt;PrivateRoute path={`${url}orders/new`} component={OrderForm} /&gt;
    &lt;PrivateRoute
      path={`${url}orders/pending/:id`}
      component={ViewOrder}
    /&gt;
    &lt;PrivateRoute
      path={[`${url}/`, `${url}orders/pending`]}
      component={PendingOrders}
    /&gt;
  &lt;/Switch&gt;;
  </code></pre>