react -ant design:menu导航栏根据跳转和刷新自动匹配到默认事件

在ant design中 导航栏menu组件配合路由使用时会出现编程式导航跳转和刷新其它页面默认背景样式改变回首页的情况

解决的项目代码

render(){
        // console.log(this.state.defaulS)//放在componentDidMount 会一直是初始值null
        const pathname = this.props.history.location.pathname
        let defaulS = []
        defaulS.push(pathname)
        console.log(defaulS)//实时根据当前路径更新
        return (
            // <ul>
            //   <li><Link to='/home'>首页</Link></li>
            //   <li><Link to='/about'>关于</Link></li>
            //   <li><Link to='/topics'>主题列表</Link></li>
            //   <li><Link to='/mine'>我的</Link></li>
            //   <li><Link to='/mine/Ucenter'>用户详情</Link></li>
            // </ul>
                // <ul>
                // <li><NavLink activeStyle={{color:'green',background:'yellow'}} to='/home'>首页</NavLink></li>
                // <li><NavLink activeClassName='select' to='/about'>关于</NavLink></li>
                // </ul>
                <Header>
                    <div className="logo" />
                    {/* 原defaultSelectedKeys不能用只能初始化加载 二次导航进入会失效 */}
                    <Menu theme="dark" mode="horizontal" selectedKeys={defaulS}>
                    <Menu.Item key="/home"><NavLink style={{textDecoration:'none'}} to='/home'>首页</NavLink></Menu.Item>
                    <Menu.Item key="/debug"><NavLink style={{textDecoration:'none'}} to='/debug'>调试</NavLink></Menu.Item>
                    <Menu.Item key="/creat"><NavLink style={{textDecoration:'none'}} to='/creat'>创建节目</NavLink></Menu.Item>
                    <Menu.Item key="/login"><NavLink style={{textDecoration:'none'}} to='/login'>退出</NavLink></Menu.Item>
                    <Menu.Item key="/other" onClick={this.fnTurn}>其它</Menu.Item>
                    </Menu>
                </Header>
        )
    }

说明：

根据 this.props.history.location.pathname获取当前导航（不管跳转还是刷新页面都可）

刷新后还有自动跳转后（只要不是点击跳转）：选中事件都不会加载

框架有个defaultSelectedKeys和selectedKeys

一定不要用错defaultSelectedKeys只是默认的初次加载所以刷新时起作用再次就不会起作用了

用selectedKeys然后动态绑定到指定的当前跳转路径：不管哪个页面怎么跳转进来都会对应上

注意的是配置导航的key要和path对应一致

 <Menu.Item key="/home"><NavLink style={{textDecoration:'none'}} to='/home'>首页</NavLink></Menu.Item>

 参考代码：

import React, {Component} from 'react'
import {NavLink, Route, Switch, withRouter} from 'react-router-dom';
import { Layout, Menu, Breadcrumb,Collapse,Button } from 'antd';
const { Header, Content, Footer } = Layout;
// import './index.css'
class Nav extends Component {
    constructor(props){
        super(props)
        this.state = {
        }
    }
    componentWillMount(){
    }
    componentDidMount(){
        //dom操作放在这里面  请求数据也建议放在这里
        console.log(this.props.history.location.pathname)
    }
    render(){
        // console.log(this.state.defaulS)//放在componentDidMount 会一直是初始值null
        const pathname = this.props.history.location.pathname
        let defaulS = []
        defaulS.push(pathname)
        console.log(defaulS)//实时根据当前路径更新
        return (
            // <ul>
            //   <li><Link to='/home'>首页</Link></li>
            //   <li><Link to='/about'>关于</Link></li>
            //   <li><Link to='/topics'>主题列表</Link></li>
            //   <li><Link to='/mine'>我的</Link></li>
            //   <li><Link to='/mine/Ucenter'>用户详情</Link></li>
            // </ul>
                // <ul>
                // <li><NavLink activeStyle={{color:'green',background:'yellow'}} to='/home'>首页</NavLink></li>
                // <li><NavLink activeClassName='select' to='/about'>关于</NavLink></li>
                // </ul>
                <Header>
                    <div className="logo" />
                    {/* 原defaultSelectedKeys不能用只能初始化加载 二次导航进入会失效 */}
                    <Menu theme="dark" mode="horizontal" selectedKeys={defaulS}>
                    <Menu.Item key="/home"><NavLink style={{textDecoration:'none'}} to='/home'>首页</NavLink></Menu.Item>
                    <Menu.Item key="/debug"><NavLink style={{textDecoration:'none'}} to='/debug'>调试</NavLink></Menu.Item>
                    <Menu.Item key="/creat"><NavLink style={{textDecoration:'none'}} to='/creat'>创建节目</NavLink></Menu.Item>
                    <Menu.Item key="/login"><NavLink style={{textDecoration:'none'}} to='/login'>退出</NavLink></Menu.Item>
                    <Menu.Item key="/other" onClick={this.fnTurn}>其它</Menu.Item>
                    </Menu>
                </Header>
        )
    }
}
export default withRouter(Nav);

不要忘了高阶函数withRouter 不然获取的props为空对象