antd的导航li当前活动项（高亮），为什么刷新就不正常显示了？

Question

我使用antd的导航栏，并且用了react-router的<Link>做路由跳转，点击的li高亮，正常显示，但刷新后，li就不高亮显示了。

    <Menu.Item key="1"><Link to='/1'>1111</Link></Menu.Item>
    <Menu.Item key="2"><Link to='/2'>222</Link></Menu.Item>
    <Menu.Item key="3"><Link to='/3'>333</Link></Menu.Item>
    <Menu.Item key="4"><Link to='/4'>4444</Link></Menu.Item>
    <Menu.Item key="5"><Link to='/5'>5555</Link></Menu.Item>

看代码发现aria-selected属性变成false了
刷新前：

刷新后：

请问该如何解决啊？

Answer 1

截取当前url,设置selectedKeys

Answer 2

通过state来控制显示当前selectedKeys

1.设置state

this.state = {
      currentUrl : '/userInfo'
}

2.在componentDidMount的时候使用location.pathname截取到url，设置state

componentDidMount(){
    let url = location.pathname,
          current = url.split('/admin')[1];
    //console.log(current);
    this.setState({
      currentUrl: current
    });
  }

3.Menu的 onSelect 函数也可以获取到当前的key

 <Menu theme="dark"
       mode="inline"
       selectedKeys={[this.state.currentUrl]}
       onSelect={this.handleSelectKey}
 >
       <Menu.Item key="/userInfo">
         <Link className="nav-text" to="/userInfo">
            <Icon type="user"/>
            用户信息
         </Link>
       </Menu.Item>
</Menu>

handleSelectKey(item,key,selectedKeys){
    //console.log(item.key);
    this.setState({
      currentUrl: item.key
    });
}