如何使所选项目在反应 js 的侧栏中处于活动状态？

Question

I had hover in selecting the page, i need this as active state. I need to show active on the current page, its not working any help..? I dont want to change the text color on hover. my sidebar.js code is :

<ul className="nav">

          <li className={ this.isPathActive('/dashboard') ? 'nav-item active' : 'nav-item' }>
            <Link className="nav-link" to="/dashboard">
            <Icon icon={stethoscopeIcon} />&nbsp;&nbsp;
              <span className="menu-title">Doctors</span>
            </Link>
          </li>


          <li className={ this.isPathActive('/tables') ? 'nav-item active' : 'nav-item' }>
            <Link className="nav-link" to="/tables/basic-table">
            <Icon icon={calenderIcon} />&nbsp;&nbsp;
              <span className="menu-title">Tables</span>
            </Link>
          </li>

        </ul>

By default it showing different colors on hover i need to disable all and give some color in active state.

Answer 1

If you are trying to apply styles for active links then you could use react-router-dom NavLink component ( https://reacttraining.com/react-router/web/api/NavLink ).

If you want to change the hover colors then you could override them using css:

.nav-link:hover { ... }

Answer 2

For Active State, you need to use Nav Link

https://reacttraining.com/react-router/web/api/NavLink