How to apply active menu in Link in react?

Question

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>

Does this answer your question? [Active link with React-Router?](https://stackoverflow.com/questions/41131450/active-link-with-react-router) — SuleymanSah, Jan 09 '20 at 13:32

score 4 · Answer 1 · answered Jan 09 '20 at 13:28

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>
    )
}

Alexander · Accepted Answer · 2020-01-09T13:25:47.717

2

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.

edited Jan 09 '20 at 13:25

answered Jan 09 '20 at 13:21

Alexander

1,220
6
12

1

Provide a link to the React documentation where `NavLink` is declared as part of React. – oklas Jan 09 '20 at 13:23
It gives me this errror Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. – Nikul Panchal Jan 09 '20 at 13:34
@NikulPanchal, Did you export NavLink from react-router? – Alexander Jan 09 '20 at 13:39

How to apply active menu in Link in react?

2 Answers2