react-ant 解决tab切换在地址栏输入对应的菜单出现导航与内容对应不上的问题

仓库地址:nav分支 

https://gitee.com/zhouyunfang/react-dva-antDesign/tree/nav

 我这里indexPages.js为父组件

NavBar.js为子组件

问题说明,当手动在地址栏输入地址时nav导航active无法激活但页面可以正常跳转

解决;

ant design的官网:
https://ant.design/components/menu-cn/#components-menu-demo-switch-mode

indexPages.js 父组件传值

  {/* 把父组件的props传入子组件,子组件获取当中的location地址并对menu中的 selectedKeys动态赋值达到地址栏与当前的Nav激活一致*/}
    

NavBar.js子组件使用

通过this.props.location.pathname提取路径

import React, { Component } from 'react'
import style from './index.scss'
import { Menu } from 'antd';
// 路由跳转
import { Link } from 'dva/router'

class index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedKeys: []
        }
    }
    /**
 * 当页面刷新时，组件会重新加载，会执行 componentDidMount(cdm) 钩子函数
 * 为解决刷新页面菜单与路由不同步问题，解决方法则放在 cdm 钩子函数里执行
 */
    componentDidMount() {
        this.handleSelectedKeys(this.props.location.pathname);
    }
    // 内容更新时
    UNSAFE_componentWillReceiveProps(nextProps) {
        const { pathname } = this.props.location;
        // 判断当前和点击的是否一致
        if (nextProps.location.pathname !== pathname) {
            this.handleSelectedKeys(nextProps.location.pathname);

        }
    }

    // 修改地址栏手动输入地址与菜单激活不一致方法
    handleSelectedKeys(pathname) {
        // /admin = ["/","admin"]
        // 根据'/'把路由地址分割成一个数组
        const temp = pathname.split('/')
        // 如果数组的长度小于2,表示的是只有根路径/,设置为Home. 否则取数组中第二个值
        const key = temp && temp.length < 2 ? 'home' : temp[1];
        this.setState({
            selectedKeys: [key]
        })
    }
    render() {
        return (
            
   
                
                    首页
                    菜单  

                

            
        )
    }

}
export default index