活动链接适用于嵌套路由，但不适用于单个路由

Question

https://material-ui.com/components/lists。我遵循此指示。我使用Material UI react创建了一个抽屉。我希望链接处于活动状态，以便背景更改。嵌套链接有效，但单个路由无效。我很困惑

我的菜单组件。

import React from 'react';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Collapse from '@material-ui/core/Collapse';
import { NavLink  } from "react-router-dom";

function Menu(props) {
    const objs = props.objs;
    const index = props.index
    const [open, setOpen] = React.useState(false);
    const [selectedIndex, setSelectedIndex] = React.useState(1);

    function handleListItemClick(event, index) {
        setSelectedIndex(index);
        console.log(index);
    }

    function click(){
        setOpen(!open)
        console.log('i ma ss')
    }


    function handler(obj , index) {
        if (obj.children) {
        // console.log(obj.children)
            return (
                // Sub Routing
                <React.Fragment>
                    <ListItem key={obj.name} button onClick={ click  }>
                        <ListItemIcon>
                        {obj.icon}
                        </ListItemIcon>
                        <ListItemText primary={obj.name} />
                        {open ? <ExpandLess /> : <ExpandMore />}
                    </ListItem>
                    <Collapse in={open} timeout="auto" unmountOnExit>
                        {obj.children.map((data , arr) => {
                            return <NavLink style={{textDecoration : 'none' , color : 'black'}} key={data.name} to={data.link}>
                            <ListItem selected={selectedIndex === data.name ? true : false}
                                        onClick={event => handleListItemClick(event, data.name)}
                                        button>
                                <ListItemIcon>
                                    <div></div>
                                </ListItemIcon>
                            <ListItemText primary={data.name} />
                        </ListItem>
                            </NavLink>
                        })}
                    </Collapse>
                </React.Fragment>
            ) 
        } else {
            return  <NavLink style={{textDecoration : 'none' , color : 'black'}} to={obj.link}>
                <ListItem onClick={ click }
                        selected={selectedIndex === obj.name ? true  : false}
                        onClick={event => handleListItemClick(event, obj.name)}
                        button>
                    <ListItemIcon>
                        {obj.icon}
                    </ListItemIcon>
                    <ListItemText primary={obj.name} />
                </ListItem>
            </NavLink>
        }
    };
    return handler(objs);
};

export default Menu;

我的抽屉组件。

import React, { useState } from 'react';
import clsx from 'clsx';
import { BrowserRouter, Route ,Switch   } from "react-router-dom";
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import CssBaseline from '@material-ui/core/CssBaseline';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import Navbar from '../../Components/NavBarComponent/navbar.component'
import NoPageFound from '../../Components/NoPageFound/NoPageFound';
import Setup from "./../setup/setup"
import LoginPage from '../LoginPage/LoginPage';
import Menu from '../../Components/SideMenu/SideMenu.Component';
import DonutSmall from '@material-ui/icons/DonutSmall';
import FindReplace from '@material-ui/icons/PermIdentity';
import SettingsInputComponent from '@material-ui/icons/SettingsInputComponent';
import FolderOpen from '@material-ui/icons/FolderOpen';
import CollectionsBookmark from '@material-ui/icons/CollectionsBookmark';
import Dashboard from '@material-ui/icons/Dashboard';
import workflowPage from '../WorkFlow/WorkflowPage'
import Header from '../../Components/Header/Header.Component'

const drawerWidth = 240;

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
  },

  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
  },
  drawerOpen: {
    width: 240,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerClose: {
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    width: theme.spacing(7) + 1,
    [theme.breakpoints.up('sm')]: {
      width: theme.spacing(9) + 1,
    },
  },

  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar,
  },
  content: {
    flexGrow: 1,
  },
  _padding: {
    padding: theme.spacing(2),
  }

}));


export default function Home(props) {
  // Styling using jss
  const classes = useStyles();
  //State
  const [open, setOpen] = useState(false);

  // Define Routes
  const routes = [
    {
      name : 'Dashboard' , 
      link : 'Dashboard',
      icon : <Dashboard />
    },
    {
      name : 'Work Flow' ,
      link : 'workflow',
      icon : <DonutSmall />
    }, 
    {
      name : 'Setups',
      icon : <SettingsInputComponent />,
      children : [
        {
          name : 'Organization' ,
          link : '/organization',
          icon : 'dropdown'

        },
        {
          name : 'Department' ,
          link : '/department',
          icon : 'dropdown'
        },
        {
          name : 'Section' ,
          link : '/section',
          icon : 'dropdown'
        },
        {
          name : 'Location' ,
          link : '/location',
          icon : 'dropdown'
        },

      ]
    },
    {
      name : 'Documents',
      link : 'documents',
      icon : <FolderOpen />
    }, 
    {
      name : 'Users',
      icon : <FindReplace />,
      children : [
        {
          name : 'Organization' ,
          link : '/organization',
          icon : 'dropdown'

        },
        {
          name : 'Department' ,
          link : '/department',
          icon : 'dropdown'
        },
        {
          name : 'Section' ,
          link : '/section',
          icon : 'dropdown'
        },
        {
          name : 'Location' ,
          link : '/location',
          icon : 'dropdown'
        },

      ]
    } , 
    {
      name : 'Manual Record', 
      link : 'manualrecord',
      icon : <FindReplace />
    }, 
    {
      name : 'Report' ,
      link : 'report',
      icon : <CollectionsBookmark />
    }];

  //Drawer Open Close Functiion
  function handleDrawer() {
    setOpen(!open);
  };

  console.log(props)



  return (
    <BrowserRouter>
    {true ? 
    <div className={classes.root}>
      <CssBaseline />
      {/* Drawer */}
      <Drawer
        variant="permanent"
        className={clsx(classes.drawer, {
          [classes.drawerOpen]: open,
          [classes.drawerClose]: !open,
        })}
        classes={{
          paper: clsx({
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          }),
        }}
        open={open}
      >
        <div className={classes.toolbar}>
          <IconButton onClick={handleDrawer}>
            {open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
          </IconButton>
        </div>
        <Divider />
        <List>
          {routes.map((obj , index) => {
           return <Menu objs={obj} key={index} index={index} />

          })}
        </List>

      </Drawer>
      {/* Content Display  */}
      <main className={classes.content}>
        <Navbar />
        <Header heading="Dashboard" />
        <div>
        <Switch>
            <Route path="/workflow" component={workflowPage} />
            <Route component={NoPageFound} />
        </Switch>
        </div>
      </main>
      </div> : <LoginPage />}
      </BrowserRouter>

  );
};