Как добавить класс в nav, когда текущая ссылка = ссылка на реагирующий маршрутизатор

Question

Я пытаюсь сделать основной сайт маршрутизатора, как показано ниже. Я хочу добавить «выбранный» класс к элементам, когда «to» соответствует текущему URL-пути (чтобы он мог выделить активную ссылку).

Я не вижу, как получить местоположение в реквизитах приложения, чтобы я мог использовать это местоположение для изменения стиля.

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "./App.scss";

function About() {
  return <h2>About</h2>;
}

function Projects() {
  return <h2>Projects</h2>;
}
function EmailList() {
  return <h2>EmailList</h2>;
}

function App(props) {
  console.log(props);
  return (
    <Router>
      <div id="router">
        <div id="nav">
          <Link id="about-link" className="" to="/">
            <div className="circle icon-about">
              <span>About</span>
            </div>
          </Link>
          <Link id="projects-link" className="selected" to="/projects/">
            <div className="circle icon-projects">
              <span>Projects</span>
            </div>
          </Link>
          <Link id="writing-link" to="/writing/">
            <div className="circle icon-writing">
              <span>Writing</span>
            </div>
          </Link>
          <Link id="mailing-list-link" to="/email-list/">
            <div className="circle icon-email-list">
              <span> Mailing List</span>
            </div>
          </Link>
        </div>
        <div id="content">
          <Route path="/" exact component={About} />
          <Route path="/projects/" component={Projects} />
          <Route path="/email-list/" component={EmailList} />
        </div>
      </div>
    </Router>
  );
}

export default App;

Answer 1

Вы можете использовать

<NavLink to="/" activeClassName="selected"> FAQs </NavLink>

вместо <Link>

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

Answer 2

как насчет проверки window.location.pathname внутри приложения?