как сделать выбранный элемент активным в боковой панели в реакции js?

Question

У меня был курсор при выборе страницы, мне нужно это как активное состояние. Мне нужно показать активным на текущей странице, не работает какая-либо помощь ..? Я не хочу менять цвет текста при наведении. моя боковая панель. js код:

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

По умолчанию он показывает разные цвета при наведении, мне нужно отключить все и дать немного цвета в активном состоянии.

Answer 1

Для активного состояния необходимо использовать Nav Link

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

Answer 2

Если вы пытаетесь применить стили для активных ссылок, вы можете использовать компонент NavLink реагирующего маршрутизатора-dom (https://reacttraining.com/react-router/web/api/NavLink).

Если вы хотите изменить цвета при наведении тогда вы можете переопределить их, используя css:

.nav-link:hover { ... }