React菜单选中项高亮问题求助：无法实现选中项高亮

针对你的代码，核心问题在于未正确关联路由状态与Material-UI ListItem的选中状态，同时样式定义存在语法错误。以下是具体修复方案：

1. 接入路由状态，获取当前路径 #

类组件需通过withRouter高阶组件获取路由信息，先补充导入：

import { withRouter } from 'react-router-dom'

然后修改组件导出，用withRouter包裹：

export default withStyles(classes)(withRouter(MenuBar))

2. 修正样式定义 #

原样式中&$selected语法无效，需单独定义选中态样式，并调整样式关联逻辑：

const classes = {
    root: {
        color: 'black',
        textAlign: 'left',
        textDecoration: 'none',
        "&:hover": {
            textDecoration: 'none',
            backgroundColor: "#505050",
            color: "white",
            borderLeft: "2px solid white",
        }
    },
    selected: {
        background: 'linear-gradient(#45deg, #FE6B8B 30%, #FF8E53 90%)',
        borderRadius: 3,
        border: 0,
        color: "#505050",
        height: 48,
        padding: '0 30px',
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        "&:hover": {
            backgroundColor: "purple",
            color: "red",
            borderLeft: "2px solid white",
            textDecoration: 'none'
        }
    },
    // 其余原有样式保持不变
};

3. 动态判断选中状态，绑定到ListItem #

修改handler方法，接收当前路径参数，对比菜单项URL判断是否选中，并给ListItem设置selected属性：

handler(children, currentPath) {
    const { classes } = this.props
    const { state } = this
    return children.map((subOption) => {
        const isSelected = currentPath === subOption.url
        if (!subOption.children) {
            return (
                <div key={subOption.name}>
                    <Link 
                        to={subOption.url} 
                        className={isSelected ? `${classes.root} ${classes.selected}` : classes.root}
                    >
                        <ListItem
                            button
                            divider={true}
                            dense={true}
                            selected={isSelected}
                            key={subOption.name}
                        >
                            <ListItemIcon>
                                <Myicon name={subOption.icn}/>
                            </ListItemIcon>
                            <ListItemText primary={subOption.name} />
                        </ListItem>
                    </Link>
                </div>
            )
        }
        // 父菜单项展开逻辑保留，若需父项在子项选中时高亮，可添加子项路径匹配判断
        return (
            <div key={subOption.name}>
                <ListItem
                    button
                    divider
                    dense
                    className={classes.root}
                    onClick={() => this.handleClick(subOption.name)}
                >
                    <ListItemText primary={subOption.name}/>
                    {state[subOption.name] ? <ExpandLess/> : <ExpandMore/>}
                </ListItem>
                <Collapse style={{paddingLeft: 30, backgroundColor: 'white'}}
                          in={state[subOption.name]}
                          timeout="auto"
                          unmountOnExit
                >
                    {this.handler(subOption.children, currentPath)}
                </Collapse>
            </div>
        )
    })
}

4. 在渲染时传递当前路径 #

修改render方法，从props中取出location.pathname并传给handler：

render() {
    const { classes, drawerOpen, menuOptions, location } = this.props
    return (
        <Drawer
            variant="persistent"
            anchor="left"
            open
            classes={{paper: classes.list}}
        >
            <div>
                <List>
                    {this.handler(menuItems.data, location.pathname)}
                </List>
            </div>
        </Drawer>
    )
}

额外提示 #

• 确保menuItems中的URL与路由配置的路径完全一致（包括开头斜杠等细节）
• 若需要父菜单项在子项选中时也高亮，可在父项的选中判断中，检查子项URL是否包含当前路径

内容的提问来源于stack exchange，提问作者sudesh sampath