时间戳

首页 > 解决方案 > react-router-dom+antD/ 如何根据当前路由设置一个 Nav Element Active

reactjs - react-router-dom+antD/ 如何根据当前路由设置一个 Nav Element Active

问题描述

我创建了以下导航栏

  import React,{Component} from "react";

  import { Layout, Menu ,Icon} from 'antd';
  import {NavLink} from 'react-router-dom';
  const { Header } = Layout;
  const SubMenu = Menu.SubMenu;


 class NavBar extends Component {

constructor(props){
  super(props);
  this.state={
  current: '1'
 }

this.handleMenuClick=this.handleMenuClick.bind(this);
}

  handleMenuClick(e){
    this.setState({
    current : e.key  
  })
}

 render(){
   return(
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu
          theme="light"
          mode="horizontal"
          style={{ lineHeight: '64px' }}
          selectedKeys={[this.state.current]}
          onClick={this.handleMenuClick}
        >
          <Menu.Item key="1"><NavLink to="/">Home</NavLink></Menu.Item>
          <Menu.Item key="2"><NavLink to="/about">About Us</NavLink></Menu.Item>
          <Menu.Item key="3"><NavLink to="/contact">Contact Us</NavLink></Menu.Item>

         <SubMenu key="4" title={<span><Icon type="setting" />Account</span>}>
              <Menu.Item key="setting:1"><NavLink to="/login">Sign In</NavLink></Menu.Item>
              <Menu.Item key="setting:2"><NavLink to="/register">Register</NavLink></Menu.Item>
          </SubMenu>

        </Menu>
      </Header>
   </Layout>
       );
   }
}

 export default NavBar;

并且它的活动状态在从一种状态导航到另一种状态时工作正常。但只要我点击刷新按钮，尽管它当前在哪个路线上，它总是将 Home Nav 设置为活动状态。即使页面被刷新，如何动态设置导航元素。

标签： reactjsreact-router-domantd

解决方案

您正在设置

current: '1'

相反，您应该根据选择的菜单设置密钥，如果您有不同的 url 端点，您可以获取 url 并根据 url 您可以修改current变量。

如果您没有不同菜单的不同 url，您可以使用 localstorage 保存当前状态，并可以再次从 localstore 获取状态

推荐阅读