Как присвоить className="active" для li?

Question

[Smuzzzzzi]

import {NavLink} from 'react-router-dom';
<li className="active">
  <NavLink to="/">
    <u>Главная</u>
  </NavLink>
</li>
<li className="active">
  <NavLink to="/about">
    <u>О нас</u>
  </NavLink>
</li>

Answer 1

[nakree]

NavLink

import {NavLink} from 'react-router-dom';
<li>
  <NavLink to="/" activeClassName="active">
    <u>Главная</u>
  </NavLink>
</li>
<li>
  <NavLink to="/about" activeClassName="active">
    <u>О нас</u>
  </NavLink>
</li>

Comments

[Smuzzzzzi]

В заголовке подробно написано, что мне нужно!
Вы привели пример для а, мне нужно для li

[nakree]

Smuzzzzzi, эм, использовать просто <Link/> , и написать банальную функцию:

сlass Links extends React.Component {
toggleActive = ({currentTarget}) => {
  currentTarget.classList.toggle('active');
}

render() {
 <li onClick={this.toggleActive}>
  <Link to="/">
    <u>Главная</u>
  </Link>
</li>
<li onClick={this.toggleActive}>
  <Link to="/about">
    <u>О нас</u>
  </Link>
</li>
}

}

[Smuzzzzzi]

nakree, Cпасибо огромное? скажите? а как сделать чтоб по умолчанию главная была активна?

[nakree]

Smuzzzzzi, изначально добавить класс .active в компоненте. elem.classList.toggle(active)при клике уберет этот класс, если он был, или добавит, если его не было. Ниже Антон Спирин написал более универсальный компонент, который будет подсвечивать нужный li в зависимости от pathname, и я думаю Вам это решение подойдет лучше, потому что здесь нужно еще убирать другие класcы .active и подсвечивать только по клику на нужный.

Answer 2

[Антон Спирин]

import { Link, withRouter } from 'react-router-dom';

const Example = ({ location }) => (
  <ul>
    <li className={location.pathname === '/' ? 'active' : ''}>
      <Link to="/">
        <u>Главная</u>
      </Link>
    </li>
    <li className={location.pathname === '/about' ? 'active' : ''}>
      <Link to="/about">
        <u>О нас</u>
      </Link>
    </li>
  </ul>
);

export default withRouter(Example);

Демо.