antd的Menu组件的触发状态是由selectedKeys
属性决定的
当我们在一个页面组件中使用了Menu,想要当前的path与antd的Menu始终保持一致,我们叫想办法获取到path,并且修改Menu的selectedKeys
这里我们把Menu写进一个NavBar组件里
所以我们在父组件打印props是可以获取到pathname的,我们要把它作为props传递给子组件
子组件在cdm(componentDidMount)函数中处理
componentDidMount() {
// location 包括 pathname search hash state
this.handleSetSelectedKeys(this.props.location.pathname);
}
handleSetSelectedKeys(pathname) {
// /admin = ["/","admin"]
// 根据'/'把路由地址分割成一个数组
const temp = pathname.split('/');
// 如果数组的长度小于2,表示的是只有根路径/,设置为Home. 否则取数组中第二个值
const key = temp && temp.length < 2 ? 'home' : temp[1];
this.setState({
selectedKeys: [key]
});
}
最后
<Menu
className={style['menu-left']}
mode="horizontal"
defaultSelectedKeys={['home']}
selectedKeys={this.state.selectedKeys}
>