react.js - antd 在create-react-app中用antd搭建PC端SPA,路由切换后,浏览器前进后退后菜单激活状态如何改变
本文介绍了react.js - antd 在create-react-app中用antd搭建PC端SPA,路由切换后,浏览器前进后退后菜单激活状态如何改变的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我用create-react-app搭建项目,UI库用antd,react-router4.1.1做路由,做了一个侧边导航做路由切换,已经实现,但是当我点击浏览器的前进和后退按钮时候如何让导航菜单的按钮状态随着路由一起变化?现在是点击前进后退之后路由依然切换,但是menu按钮的状态不动。现在就是差一个事件,判断是否点击了前进或后退,然后设置isSelect的值
react state代码:
state = {
isSelect:'/index'
};
antd代码:
<Menu theme="dark" mode="inline" onSelect={ this.selectItem } selectedKeys={[this.state.isSelect]}>
<Menu.Item key="/index" ref="item">
<Icon type="home" />
<span>首页</span>
<Link to="/index" ref="item"></Link>
</Menu.Item>
<Menu.Item key="/orderform">
<Icon type="video-camera" />
<span>订单</span>
<Link to="/orderform" ref="item"></Link>
</Menu.Item>
<Menu.Item key="/repertory">
<Icon type="upload" />
<span>库存</span>
<Link to="/repertory"></Link>
</Menu.Item>
</Menu>
解决方案
现在已经解决了,用的是HTML5的popstate,popstate 事件会在用户点击某个前进/后退按钮的时候触发;而在每次重渲染的时候,每个 Route 组件都会重现检测当前 URL 是否匹配其预设的路径参数。原文链接在这里https://zhuanlan.zhihu.com/p/...
我的代码:
//----------------------点击浏览器的前进后退按钮可以切换导航的按钮激活状态
componentWillMount() {
window.addEventListener("popstate", this.handlePop.bind(this))
}
componentDidMount() {
window.removeEventListener("popstate", this.handlePop.bind(this))
}
handlePop(){
this.setState({
isSelect: window.location.pathname,
})
}
//----------------------点击的时候当前按钮激活
selectItem =()=>{
this.setState({
isSelect: window.location.pathname,
})
};
DOM结构:
<Menu theme="dark" mode="inline" onSelect={ this.selectItem } selectedKeys= {[this.state.isSelect]}>
<Menu.Item key="/index" ref="item">
<Icon type="home" />
<span>首页</span>
<Link to="/index" ref="item"></Link>
</Menu.Item>
<Menu.Item key="/orderform">
<Icon type="video-camera" />
<span>订单</span>
<Link to="/orderform" ref="item"></Link>
</Menu.Item>
<Menu.Item key="/repertory">
<Icon type="upload" />
<span>库存</span>
<Link to="/repertory"></Link>
</Menu.Item>
</Menu>
这篇关于react.js - antd 在create-react-app中用antd搭建PC端SPA,路由切换后,浏览器前进后退后菜单激活状态如何改变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文