React AntD 刷新页面后菜单默认选中项设置的问题
阅读 (1696) 2020-01-04 11:23:02
React AntD在刷新页面后,菜单高亮消失了,这时需要获取当前路由路径设置defaultSelectedKeys
我当前版本:
React: 16.12.0
react-router-dom: 5.1.2
AntD: 3.26.6
按照AntD官方Menu介绍,点击时设置高亮没问题,但刷新页面时,菜单高亮失效了
以下是官方示例,假设是App.js,我稍微精简了一下Menu:
const { Menu, Icon } = antd;
const { SubMenu } = Menu;
class App extends React.Component {
state = {
current: '/home',
};
handleClick = e => {
console.log('click ', e);
this.setState({
current: e.key,
});
};
render() {
return (
<Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
<Menu.Item key="/home">
<Link to="/home">
<Icon type="fire" /> 首页</Link>
</Menu.Item>
<Menu.Item key="/page1">
<Link to="/page1">
<Icon type="fire" /> 每日精选</Link>
</Menu.Item>
</Menu>
);
}
}
ReactDOM.render(<App />, mountNode);
加上路由等代码:
import React, { Component } from 'react'
import { Layout, Menu, Icon, BackTop, Affix, message } from 'antd'
import { Route, Switch, Link, withRouter } from 'react-router-dom'
import Home from './pages/Home'
import Page1 from './pages/Page1'
const { Header, Footer, Content } = Layout
const { SubMenu } = Menu
class App extends Component {
constructor(props) {
super(props)
this.state = {
current: '/',
top: 0
}
}
componentDidMount() {
console.log(this.props) // 如果不使用withRouter,这里打印信息是空的{}
if(this.props.location.pathname) {
this.setState({
current: this.props.location.pathname
})
}
}
handleClick = e => {
console.log('click ', e)
this.setState({
current: e.key,
})
}
render () {
return (
<div className="App">
<Layout>
<Affix offsetTop={this.state.top}>
<Header>
<div className="container">
<Menu onClick={this.handleClick} // 点击菜单的事件
defaultSelectedKeys={[this.state.current]} // 菜单默认选中项的key
selectedKeys={[this.state.current]}
mode="horizontal">
<Menu.Item key="/home">
<Link to="/home">
<Icon type="fire" /> 首页</Link>
</Menu.Item>
<Menu.Item key="/page1">
<Link to="/page1">
<Icon type="fire" /> 每日精选</Link>
</Menu.Item>
</Menu>
</div>
</Header>
</Affix>
<Content className="main">
<div className="container">
<Switch> // 路由切换component
<Route path='/home' exact component={Home}></Route>
<Route path='/page1' exact component={Page1}></Route>
</Switch>
</div>
</Content>
<Footer className="footer">
<div className="container">
底部内容
</div>
</Footer>
</Layout>
<BackTop>
<div className="ant-back-top-inner"><Icon type="arrow-up" /></div>
</BackTop>
</div>
)
}
}
export default withRouter(App) // 这里使用withRouter
到这里,还无法获取props中的locaiton, 错误提示是:withRouter必须包裹在<Router></Router>中
Error: Invariant failed: You should not use <withRouter(App) /> outside a <Router>
假设App.js是被Index.js引用的,那只要在Index.js添加<Router></Router>
import React from 'react'
import ReactDOM from 'react-dom'
import { ConfigProvider } from 'antd'
import { BrowserRouter as Router } from 'react-router-dom'
import zhCN from 'antd/es/locale-provider/zh_CN'
import App from './App';
// 在引用的<App />外再加上<Router></Router>外套即可, ConfigProvider是引用的Antd多语言组件,设置中文,可以不用,但分页等组件默认就不是中文了,这跟本文要说的Router不相关,可以不加
ReactDOM.render(<ConfigProvider locale={zhCN}><Router><App /></Router></ConfigProvider>, document.getElementById('root'));
更新于:2020-01-04 11:23:02