问题描述:使用antd的导航菜单时,点击到某一项,刷新页面时,路由没有跟着刷新。
解决思路如下:
Menu 用 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 <withRouter() /> outside a <Rout
解决办法:
用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'));