Кастомная активная ссылка в реакции-роутере v4

Question

Я хочу добавить активный класс, для которого активен маршрутизатор. Я начинаю учиться реагировать, поэтому мне нужна помощь в этом. Мне нужно добавить класс в элемент li , а не в элемент * Link .

<ul className="list-unstyled">
    <li className={RouteHelper("/")}> <Link to="/"> <FaHome /> Home </Link> </li>
    <li className={RouteHelper("/tables")}><Link to="tables"> <FaTable />Tables </Link></li>
</ul>

Вот функция, которая становится активным классом

const RouteHelper = (url) => {
    return window.location.pathname === url ? "active" : null;
}
export default RouteHelper;

Answer 1

Я думаю, вам нужно создать CustomLink. Вот код от реактивного маршрутизатора docs .

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const CustomLinkExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <ListItemLink activeOnlyWhenExact={true} to="/">
            <FaHome /> Home
          </ListItemLink>
          <ListItemLink activeOnlyWhenExact={true} to="/tables" label="Tables">
            <FaTable />
            Tables
          </ListItemLink>
        </ul>

        <hr />
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/tables" component={Tables} exact />
        </Switch>
      </div>
    </Router>
  );
};

const ListItemLink = ({ to, activeOnlyWhenExact, children }) => {
  return (
    <Route
      path={to}
      exact={activeOnlyWhenExact}
      children={({ match }) => (
        <li className={match ? 'active' : ''}>
          <Link to={to}>{children}</Link>
        </li>
      )}
    />
  );
};

const Home = () => {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
};

const Tables = () => {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
};  

Вот рабочий код: https://codesandbox.io/s/reactrouter-62rye