How to assign className="active" to li?

Question

React

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

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>

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

Demo.