(已解决)在create-react-app中用antd搭建PC端SPA，路由切换后，浏览器前进后退后菜单激活状态如何改变

Question

我用create-react-app搭建项目，UI库用antd，react-router4.1.1做路由，做了一个侧边导航做路由切换，已经实现，但是当我点击浏览器的前进和后退按钮时候如何让导航菜单的按钮状态随着路由一起变化？现在是点击前进后退之后路由依然切换，但是menu按钮的激活状态不动。判断是否点击了前进或后退，然后设置的激活的菜单以及展开的菜单。

Answer 1

现在已经解决了，用的是HTML5的popstate，popstate 事件会在用户点击某个前进/后退按钮的时候触发；刷新的时候，在组件挂载的时候设置一下激活的MenuItem 的 keys和展开的子菜单数组。原文链接在这里https://zhuanlan.zhihu.com/p/...

放上完整代码

import React from 'react'
import { Menu, Icon } from 'antd';
import { Link, withRouter } from 'react-router-dom'
import './index.less'
const SubMenu = Menu.SubMenu;
const MenuItem  = Menu.Item

@withRouter
class Navigatior extends React.Component {
  state = {
    menus: [
      {
        id: '/',
        name: '总览',
        icon:'home',
        linkTo: '/',
      },
      {
        id: 'blogManagement',
        name: '文章管理',
        icon:'bars',
        linkTo: '/blogManagement',
        subMenu: [
          {
            id: 'newBlog',
            name: '新建文章',
            linkTo: '/blogManagement/newBlog',
          },
        ]
      },
      {
        id: 'comments',
        name: '留言管理',
        icon: 'message',
        linkTo: '/comments',
        subMenu: [
          {
            id: 'audit',
            name: '留言审核',
            linkTo: '/comments/audit',
          },
          {
            id: 'delete',
            name: '留言删除',
            linkTo: '/comments/delete',
          },
        ]
      }
    ],
    selectedKeys: [],
    openKeys: []
  }
  componentDidMount() {
    this.handlePop()
    window.addEventListener("popstate", this.handlePop.bind(this))
  }
  componentWillUnmount() {
    window.removeEventListener("popstate", this.handlePop.bind(this))
  }
  // 获取激活的菜单
  getSelectedKeys = () => {
    return [ this.props.location.pathname ]
  }
  // 获取展开的子菜单数组
  getOpenKeys = () => {
    const { location: { pathname } } = this.props
    if (pathname === '/') return
    return [ pathname.split('/')[1] ]
  }
  handlePop(){
    this.setState({
      selectedKeys: this.getSelectedKeys(),
      openKeys: this.getOpenKeys(),
    })
  }
  onMenuItemClick = ({ item, key }) => {
    this.setState({
      selectedKeys: [key]
    })
  }
  onSubMenuClick = openKeys => {
    this.setState({
      openKeys
    })
  }
  render() {
    const { menus, selectedKeys, openKeys } = this.state
    return <div id="navigator">
        <Menu
          selectedKeys={selectedKeys}
          openKeys={openKeys}
          mode="inline"
          onClick={this.onMenuItemClick}
          onOpenChange={this.onSubMenuClick}
        >
          {
            menus.map(v => {
             return v.subMenu ?
                <SubMenu key={v.id} title={<span><Icon type={v.icon} /><span>{v.name}</span></span>}>
                  {
                    v.subMenu.map(k => <MenuItem key={k.linkTo}>
                      <span className="link">
                        <Link to={k.linkTo}>{k.name}</Link>
                      </span>
                    </MenuItem>)
                  }
                </SubMenu>
                :
                <MenuItem key={v.linkTo}>
                  <Icon type={v.icon} />
                  <span className="link">
                    <Link to={v.linkTo}>{v.name}</Link>
                  </span>
                </MenuItem>
            })
          }
        </Menu>
    </div>
  }
}

export default Navigatior