antd react router 导航随页面跳转菜单栏变化到相应的页面选项

Question

使用antd组件 react 框架 单页面router 我的页面发生栏跳转 想实现左侧菜单栏里的导航索引也变化到与页面相应的选项中，各位大神如何实现此功能!给点思路想法就行 图片描述

Answer 1

根据url判断选中的key

render() {
    const pathName = hashHistory.getCurrentLocation().pathname;
    return (
        <Menu selectedKeys={[pathName]} >
        ...
        </Menu>
    );
}

Answer 2

如果使用antd 的 Menu 组件的话，其实本来就是有这个功能的。

Answer 3

兄弟解决了么？分享一下！

Answer 4

直接给你一个Demo.DvaInitial, 菜单就是使用antd的menu实现的。

Answer 5

有一个思路是，如果是antd的话，你的菜单栏Sider组件，应该有根据点击时设置selectedKeys的方法吧，所以页面内跳转或者前进后退时，可以在componentWillReceiveProps状态方法里再调用设置selectedKeys的方法，就可以让菜单高亮对应上页面的跳转了