React AntD 刷新页面后菜单默认选中项设置的问题

阅读 (1696)
React AntD在刷新页面后,菜单高亮消失了,这时需要获取当前路由路径设置defaultSelectedKeys
我当前版本:
React: 16.12.0
react-router-dom: 5.1.2
AntD: 3.26.6

按照AntD官方Menu介绍,点击时设置高亮没问题,但刷新页面时,菜单高亮失效了

以下是官方示例,假设是App.js,我稍微精简了一下Menu:

const { Menu, Icon } = antd;

const { SubMenu } = Menu;

class App extends React.Component {
  state = {
    current: '/home',
  };

  handleClick = e => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  };

  render() {
    return (
      <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
          <Menu.Item key="/home">
            <Link to="/home">
            <Icon type="fire" /> 首页</Link>
          </Menu.Item>
          <Menu.Item key="/page1">
            <Link to="/page1">
            <Icon type="fire" /> 每日精选</Link>
          </Menu.Item>
      </Menu>
    );
  }
}

ReactDOM.render(<App />, mountNode);

加上路由等代码:

import React, { Component } from 'react'
import { Layout, Menu, Icon, BackTop, Affix, message } from 'antd'
import { Route, Switch, Link, withRouter } from 'react-router-dom'
import Home from './pages/Home'
import Page1 from './pages/Page1'

const { Header, Footer, Content } = Layout
const { SubMenu } = Menu

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            current: '/',
            top: 0
        }
    }

    componentDidMount() {
        console.log(this.props) // 如果不使用withRouter,这里打印信息是空的{}
        if(this.props.location.pathname) {
            this.setState({
                current: this.props.location.pathname
            })
        }
    }

    handleClick = e => {
      console.log('click ', e)
      this.setState({
        current: e.key,
      })
    }
    render () {
      return (
        <div className="App">
            <Layout>
                <Affix offsetTop={this.state.top}>
                    <Header>
                        <div className="container">
                            <Menu onClick={this.handleClick} // 点击菜单的事件
                            defaultSelectedKeys={[this.state.current]} // 菜单默认选中项的key
                            selectedKeys={[this.state.current]}
                            mode="horizontal">
                                <Menu.Item key="/home">
                                    <Link to="/home">
                                    <Icon type="fire" /> 首页</Link>
                                  </Menu.Item>
                                  <Menu.Item key="/page1">
                                    <Link to="/page1">
                                    <Icon type="fire" /> 每日精选</Link>
                                  </Menu.Item>
                            </Menu>
                        </div>
                    </Header>
                </Affix>
                <Content className="main">
                    <div className="container">
                        <Switch> // 路由切换component
                            <Route path='/home' exact component={Home}></Route>
                            <Route path='/page1' exact component={Page1}></Route>
                        </Switch>
                    </div>
                </Content>
                <Footer className="footer">
                    <div className="container">
                        底部内容
                    </div>
                </Footer>
            </Layout>

            <BackTop>
                <div className="ant-back-top-inner"><Icon type="arrow-up" /></div>
            </BackTop>
        </div>
    )
  }
}

export default withRouter(App) // 这里使用withRouter

到这里,还无法获取props中的locaiton, 错误提示是:withRouter必须包裹在<Router></Router>中

Error: Invariant failed: You should not use <withRouter(App) /> outside a <Router>

假设App.js是被Index.js引用的,那只要在Index.js添加<Router></Router>

import React from 'react'
import ReactDOM from 'react-dom'
import { ConfigProvider } from 'antd'
import { BrowserRouter as Router } from 'react-router-dom'
import zhCN from 'antd/es/locale-provider/zh_CN'
import App from './App';


// 在引用的<App />外再加上<Router></Router>外套即可, ConfigProvider是引用的Antd多语言组件,设置中文,可以不用,但分页等组件默认就不是中文了,这跟本文要说的Router不相关,可以不加
ReactDOM.render(<ConfigProvider locale={zhCN}><Router><App /></Router></ConfigProvider>, document.getElementById('root'));

 

更新于:2020-01-04 11:23:02
返回顶部