最近才刚开始学习react,所以直接接触的就是v4版本,一直不知道怎么监听地址栏url的变化,刚才终于在官网找到了一个解决方案,记录一下
实现目标:直接改变地址栏的值,页面中header组件对应的内容也改变
后台管理系统界面
history
官方文档说使用history
链接:https://github.com/ReactTraining/history
具体步骤
1.新建一个全局变量文件constants.js
import { createBrowserHistory } from 'history'
let history = new createBrowserHistory();
global.constants = {
history:history
}
2.在router.js路由组件中监听路由变化
componentDidUpdate(){
//test方法是父组件方法
//global.constants.history是上一步定义的全局变量
this.props.test(global.constants.history.location.pathname);
}
3.父组件admin.js中根据路由传过来的参数pathname得到对应的title(中文)
test =(pathname) =>{
let _this = this;
//menuConfig是菜单的配置文件
for(let i=0;i<menuConfig.length;i++){
if(menuConfig[i].children){
let child = menuConfig[i].children;
for(let j=0;j<child.length;j++){
if(child[j].key===pathname){
//调用header子组件方法,改变title
_this.refs.header.updateCurrentTitle(child[j].title);
return;
}
}
}else{
let item = menuConfig[i];
if(item.key===pathname){
//调用header子组件方法,改变title
_this.refs.header.updateCurrentTitle(item.title);
return;
}
}
}
};
4.menuConfig.js配置文件大致结构
const menuList = [
{
title: '首页',
key: '/home',
icon:"home"
},
{
title: 'UI',
key: '/ui',
icon:"scan",
children: [
{
title: '按钮',
key: '/ui/buttons'
},
{
title: '通知提醒',
key: '/ui/notification'
},
{
title: '全局Message',
key: '/ui/messages'
}
]
},
{
title:'表单',
key:'/form',
icon:'file-text',
children:[
{
title:'登录',
key:'/form/login'
},
{
title:'注册',
key:'/form/reg'
}
]
},
......
]
export default menuList;
5.(important!)点击菜单项,调用history.push方法
//菜单组件menuLeft.js
testSelect =(path)=>{
global.constants.history.push(path.key);
}
Menu加上onSelect属性,触发setCurrentTitle方法
<Menu
mode="inline"
className="menuList"
defaultOpenKeys={this.state.openKeys}
theme="dark"
onOpenChange = {this.onOpenChange}
defaultSelectedKeys={this.state.current}
onSelect={this.testSelect}
>
网友评论