activeClassName不适用于导航栏项目

Question

当用户在相应页面上时，我正在尝试将类应用于导航链接。 JSX代码：

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/Nav';
import Form from 'react-bootstrap/Form';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';
import { link } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import '../css/navbar.scss';
import $ from 'jquery';
class NavigationBar extends Component {
  state = {};
  render() {
    return (
      <Navbar className="Navbarr" bg="light" expand="sm">
        <Navbar.Brand activeClassName="active" className="BrandLink" href="/">
          <img
            alt=""
            src="../public/logo192.png"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />
          BRAND NAME HERE
        </Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Nav className="ml-auto">
            <Nav.Link
              className="NavLink"
              activeClassName="nav-link--active"
              href="/About"
            >
              About
            </Nav.Link>
            <Nav.Link
              className="NavLink"
              activeClassName="nav-link--active"
              href="/Gallery"
            >
              Gallery
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default NavigationBar;

SCSS代码

$color2: #629460;
.ActiveLink {
  color: white !important;
}
.BrandLink {
  color: $color1 !important;
}
.NavLink {
  color: $color1 !important;
  transition: 100ms;
}
.nav-link--active {
  color: $color2;
}
.NavLink:hover {
  color: $color2 !important;
  background-color: $color1 !important;
  transition: 100ms;
  transform: scale(1.1);
}
.Navbarr {
  background-color: transparent !important;
}

我不知道为什么CSS类“ nav-link--active”没有被添加到Nav.Links中。我在该网站上时应该是深绿色，但不会改变颜色。悬停至少工作。我做错了什么？