解决手动输入地址,antd的Menu切换没有相应改变的bug

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}
        >

你可能感兴趣的:(react)