Reactjs 如何在当前url=链接到反应路由器dom时向nav添加类

我正在尝试做一个基本的路由器网站如下。我想在“to”与当前url路径匹配时向元素添加一个“selected”类（这样它可以突出显示活动链接）

我不知道如何将位置输入到应用程序道具中，以便我可以使用该位置更改样式

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;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
导入“/App.scss”；
函数About（）{
返回大约；
}
功能项目（）{
返回项目；
}
函数EmailList（）{
返回电子邮件列表；
}
功能应用程序（道具）{
控制台日志（道具）；
返回(
关于
项目
书写
邮件列表
);
}
导出默认应用程序；

如何检查应用程序内部的

窗口.位置.路径名？

如何检查应用程序内部的

窗口.位置.路径名？
您可以使用


常见问题

而不是

您可以使用


常见问题

而不是

可能重复的可能重复的