antd中menu选中状态没有跟上路由[解决]

问题描述：使用antd的导航菜单时，点击到某一项，刷新页面时，路由没有跟着刷新。

解决思路如下：

Ｍenu 用 seletedKeys 来决定哪项被选中。需要判断当前选前的路由是什么，可以借助 withRouter。

参考代码：

//App.js
import React from 'react';
// import logo from './logo.svg';
import './App.css';
import { Layout, Menu, Icon } from 'antd';
import { HashRouter, Switch, NavLink, Route, Redirect, withRouter } from 'react-router-dom';
import BasicData from './pages/BasicData';
import CourseManage from './pages/CourseManage';
import CourseStat from './pages/CourseStat';
import QnManage from './pages/QnManage';
import StudentCourse from './pages/StudentCourse';
import SystemManage from './pages/SystemManage';

const { Header, Content, Footer, Sider } = Layout;

const App = withRouter(({ history }) => {
  return (
    <div>
      <withRouter>
        <HashRouter>
          <Layout id="components-layout" style={{ minHeight: '100vh' }}>
            <Header className="header">
              <div className="logo">课调云平台</div>
            </Header>
            <Layout>
              <Sider width={200} style={{ background: '#fff' }}>
                <Menu
                  mode="inline"
                  // defaultOpenKeys={['sub1']}
                  style={{ height: '100%', borderRight: 0 }}
                  defaultSelectedKeys={['/basicData']} selectedKeys={[history.location.pathname]}
                >
                  <Menu.Item key="/basicData">
                    <NavLink exact to='/basicData'>
                      <Icon type="user" />
                      <span className="nav-text">基础数据</span>
                    </NavLink>
                  </Menu.Item>
                  <Menu.Item key="/qnManage">
                    <NavLink exact to='/qnManage'>
                      <Icon type="user" />
                      <span className="nav-text">问卷管理</span>
                    </NavLink>
                  </Menu.Item>
                  <Menu.Item key="/courseManage">
                    <NavLink exact to='/courseManage'>
                      <Icon type="user" />
                      <span className="nav-text">课调管理</span>
                    </NavLink>
                  </Menu.Item>
                  <Menu.Item key="/courseStat">
                    <NavLink exact to="/courseStat">
                      <Icon type="user" />
                      <span className="nav-text">课调统计</span>
                    </NavLink>
                  </Menu.Item>
                  <Menu.Item key="/systemManage">
                    <NavLink exact to='systemManage'>
                      <Icon type="user" />
                      <span className="nav-text">系统管理</span>
                    </NavLink>
                  </Menu.Item>
                  <Menu.Item key="/studentCourse">
                    <NavLink exact to='studentCourse'></NavLink>
                    <Icon type="user" />
                    <span className="nav-text">学生课调</span>
                  </Menu.Item>
                </Menu>
              </Sider>
              <Layout>
                <Content
                  style={{
                    background: '#fff',
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                    margin: '24px 16px 0'
                  }}
                >
                  <Switch>
                    <Redirect exact from='/' to='/basicData'></Redirect>
                    <Route exact path='/basicData' component={BasicData}></Route>
                    <Route exact path='/qnManage' component={QnManage}></Route>
                    <Route exact path='/courseManage' component={CourseManage}></Route>
                    <Route exact path='/courseStat' component={CourseStat}></Route>
                    <Route exact path='/systemManage' component={SystemManage}></Route>
                    <Route exact path='/studentCourse' component={StudentCourse}></Route>
                  </Switch>
                </Content>
                <Footer style={{ textAlign: 'center' }}>Seul Design ©2018 Created by Seul-WP</Footer>
              </Layout>
            </Layout>
          </Layout>
        </HashRouter>
      </withRouter>
    </div >
  );
})
export default App

---

写完上述代码可能会报错误：

Error: Invariant failed: You should not use outside a

解决办法：

用Route包装App组件：

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { HashRouter, Route } from 'react-router-dom'

const Root = () => {
    return (
        <HashRouter basename='/'>
            <Route path={`/`} component={App}></Route>
        </HashRouter>
    )

}
ReactDOM.render(< Root />, document.getElementById('root'));