CODEWITHSUNDEEP
reactjs
Nikul Panchal
Nikul Panchal

Reputation: 1673

How to apply active menu in Link in react?

I want to add active class on click of Link, i have applied onClick function but it is not working expected, when i click on Link it call the active_menu function, and it change its state to true, but when the page load Dashboard again it change its state, can anyone please help me to resolve this issue ?

constructor(props) {
    super(props);
    this.state = {
      isVisible: false,
      location: [],
      active_dashboard: false,
      active_review: false,
      active_competitors: false,
      active_profile: false,
    };
    this.updateModal = this.updateModal.bind(this);
    this.logout = this.logout.bind(this);
    this.storedid = this.storedid.bind(this);
    this.active_menu = this.active_menu.bind(this);
    this.getlocation()
  }

  active_menu(id) {
    if (id == "dashboard") {
      this.setState({ active_dashboard: true, active_review: false, active_competitors: false, active_profile: false })
    } else if (id == "review") {
      this.setState({ active_dashboard: false, active_review: true, active_competitors: false, active_profile: false })
    } else if (id == "competitors") {
      this.setState({ active_dashboard: false, active_review: false, active_competitors: true, active_profile: false })
    } else if (id == "profile") {
      this.setState({ active_dashboard: false, active_review: false, active_competitors: false, active_profile: true })
    }
  }

<ul className="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
              <li className="nav-item has-treeview menu-open" onClick={() => { this.active_menu('dashboard') }}>
                <Link to="/dashboard" className={(this.state.active_dashboard) ? 'active nav-link' : 'nav-link'} id="dashboard">
                  <i className="nav-icon fa fa-home"></i>
                  <p>
                    Dashboard
                  </p>
                </Link>
              </li>
              <li className="nav-item has-treeview menu-open" onClick={() => { this.active_menu('review') }}>
                <Link to="/review" className={(this.state.active_review) ? 'active nav-link' : 'nav-link'} id="review" >
                  <i className="nav-icon fa fa-comments" ></i>
                  <p>
                    Reviews
                  </p>
                </Link>
              </li>
</u>

Upvotes: 1

Views: 7572

Answers (2)

Ali Mousavi
Ali Mousavi

Reputation: 915

Using React Hooks:

import React, {useState} from 'React'

const Menu = () => {

  const [activeMenu, setActiveMenu] = useState()

  return (
        <ul
            className="nav nav-pills nav-sidebar flex-column"
            data-widget="treeview"
            role="menu"
            data-accordion="false"
        >
            <li className="nav-item has-treeview menu-open">
                <Link
                    id="dashboard"
                    to="/dashboard"
                    className={activeMenu == 'dashboard' ? 'active nav-link' : 'nav-link'}
                    onClick={() => { setActiveMenu('dashboard') }}
                >
                    <i className="nav-icon fa fa-home"></i>
                    <p>Dashboard</p>
                </Link>
            </li>
            <li className="nav-item has-treeview menu-open">
                <Link
                    id="review"
                    to="/review"
                    className={activeMenu == 'review' ? 'active nav-link' : 'nav-link'}
                    onClick={() => { setActiveMenu('review') }}
                >
                    <i className="nav-icon fa fa-comments"></i>
                    <p>Reviews</p>
                </Link>
            </li>
        </u>
    )
}

Upvotes: 4

Alexander
Alexander

Reputation: 1400

You can use NavLink component from react-router. A special version of the Link that will add styling attributes to the rendered element when it matches the current URL.

<NavLink to="/dashboard" activeClassName="active">
  Dashboard
</NavLink>

You can also connect withRouter. This gives the your component access to this.props.history where is the current route.

Upvotes: 2

Related Questions