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為空對象