Ant Design刷新页面后导航栏丢失选中状态

Router路由目录：

const router = [
    {
        "title": "后台首页",
        "icon": "home",
        "path": "/home"
    },
    {
        "title": "商品管理",
        "icon": "carts",
        "path": "/catalogProduct",
        "children": [
            {
                "title": "全部商品",
                "icon": "carts",
                "path": "/catalog"
            },
            {
                "title": "上架商品",
                "icon": "carts",
                "path": "/product"
            }
        ]
    },
    {
        "title": "用户管理",
        "icon": "user",
        "path": "/user"
    },
    {
        "title": "图形图标",
        "icon": "home",
        "path": "/pieline",
        "children": [
            {
                "title": "饼图",
                "icon": "home",
                "path": "/pie"
            },
            {
                "title": "折线图",
                "icon": "home",
                "path": "/line"
            }
        ]
    }
]

判断并提供jsx中渲染的结构：

getMenuNodes = (MenuList) => {
  return MenuList.map(item => {
    if (!item.children) {
      return (
        <Menu.Item key={item.path}>
          <Link to={item.path}>
            <Icon type={item.icon} />
            <span>{item.title}</span>
          </Link>
        </Menu.Item>
      )
    } else {
      return (
        <SubMenu
          key={item.path}
          title={
            <span>
              <Icon type={item.icon} />
              <span>{item.title}</span>
            </span>
          }>
            {this.getMenuNodes(item.children)}
          </SubMenu>
      )
    }
  })
}

写在jsx中：

render() {
  const path = this.props.location.pathname

  return (
    <div className='MenuLeft'>
      <Menu
        mode="inline"
        theme="dark"
        selectedKeys={[path]}
      >
        {
          this.getMenuNodes(config.menuList)
        }
      </Menu>
    </div>
  );
}