react-router - ant design 的Menu 如何在点击浏览器前进后退时高亮显示？

问题描述

问 题

使用react+react-router+ant design 的项目中使用antd的Menu写了一个侧边栏，代码如下

class Sidebar extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            test: "home"
        }
    }

    componentWillMount(){
        hashHistory.listen((event)=>{
            test1 = event.pathname.split("/");
        });
        this.setState({
            test:test1[1]
        });
    }

    onCollapseChange() {
        this.props.toggle();
    }

    render() {
        var {collapse} = this.props;
        return (
            <aside className="ant-layout-sider">
                <Menu mode="inline" theme="dark" defaultSelectedKeys={[this.state.test || "home"]}>
                    <Menu.Item key="home">
                        <Link to="/home">
                            <Icon type="user"/><span className="nav-text">用户管理</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="banner">
                        <Link to="/banner">
                            <Icon type="setting"/><span className="nav-text">Banner管理</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="article">
                        <Link to="/article">
                            <Icon type="notification"/><span className="nav-text">文章管理</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="event">
                        <Link to="/event">
                            <Icon type="folder"/><span className="nav-text">活动管理</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="group">
                        <Link to="/group">
                            <Icon type="team"/><span className="nav-text">群组管理</span>
                        </Link>
                    </Menu.Item>
                </Menu>
                <div className="ant-aside-action" onClick={this.onCollapseChange.bind(this)}>
                    {collapse ? <Icon type="right"/> : <Icon type="left"/>}
                </div>
            </aside>
        )
    }
}

刷新时高亮条目和右边的内容符合，但是在点击浏览器前进/后退的时候，高亮的区域不会改变。

尝试过用window.addEventListener去监听，但是无论在哪个生命周期都监听不到；

有没有什么方法可以实现这个需求？

解决方案

截取当前url,设置selectedKeys

这篇关于react-router - ant design 的Menu 如何在点击浏览器前进后退时高亮显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！