关于antd:三步解决reactrouterdom与antd的menu在刷新时路由高亮与页面不匹配问题

问题简述:在页面刷新时,meun高亮会跳回设置的默认项,而页面还是浏览器地址对应的页面,从而呈现高亮与理论页面不匹配的景象。

解决办法:
引入withRouter包裹导航组件,并在Menu里设置selectedKeys属性。

代码如下:

//引入withRouter
import { withRouter } from 'react-router-dom'

//包裹导航组件
export default withRouter(Home)

//设置Menu的selectedKeys属性
<Menu theme="dark" mode="inline" 
 selectedKeys = {[this.props.location.pathname]}
 defaultSelectedKeys={['register']}>

附上官网文档链接:
React Router-withRouter
Antd menu api

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理