antd 刷新頁面及后退時菜單欄高亮問題

左側菜單刷新無法高亮用 withRouter，設置selectedKeys屬性

   

import { Link, Route, Switch, Redirect, HashRouter, withRouter } from 'react-router-dom';

const LeftSider = withRouter(({ history }) => {
  return (
    <Sider >
      <Menu
        mode="inline"
        defaultSelectedKeys={['/new-pro']}
        selectedKeys={[history.location.pathname]}
        theme="dark"
      >
        <Menu.Item key="/new-pro">
          <Link to="/new-pro" replace />
          新建項目
        </Menu.Item>
        <Menu.Item key="/pro-list">
          <Link to="/pro-list" replace />
          項目列表
        </Menu.Item>
      </Menu>
    </Sider>

  );
})

class App extends Component {
  render() {
    return (
      <HashRouter>
        <Layout style={{ minHeight: '100vh' }}>
          <LeftSider />
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }}>
            </Header>
            <Content style={{ margin: '0 16px' }}>
              <div
                style={{
                  margin: '24px 16px',
                  padding: 0,
                  background: '#fff',
                  minHeight: 850,
                }}   >
                <main>
                  <Switch>
                    <Route path="/new-pro" component={History} />
                    <Route path="/pro-list" component={HeaderBar} />
                    <Redirect to="/new-pro" />
                  </Switch>
                </main>
              </div>
            </Content>
          </Layout>
        </Layout>
      </HashRouter>
    );
  }
}
export default App;