反应路由器链接

Question

我正在使用带有 React-Bootstrap 的 React Router。这是我拥有的导航组件：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Navbar from "react-bootstrap/Navbar";
import { Nav } from "react-bootstrap";
import logo from "../assets/images/nav-logo.png";

import "bootstrap/dist/css/bootstrap.min.css";
import "../css/navigation.css";

class Navigation extends Component {
  state = {
    bg: "transparent",
    variant: "dark",
    className: "brand-visibility",
    shadow: "",
  };

  listenScrollEvent = (e) => {
    if (window.scrollY > 200 || window.innerWidth <= 767) {
      this.setState({
        bg: "white",
        variant: "light",
        className: "",
        shadow: "nav-shadow",
      });
    } else {
      this.setState({
        bg: "transparent",
        variant: "dark",
        className: "brand-visibility",
        shadow: "",
      });
    }
  };

  componentDidMount() {
    window.addEventListener("scroll", this.listenScrollEvent);
    window.addEventListener("resize", this.listenScrollEvent);
  }

  render() {
    return (
      <div>
        <Navbar
          id="white-bg"
          collapseOnSelect
          className={this.state.shadow}
          fixed="top"
          expand="md"
          bg={this.state.bg}
          variant={this.state.variant}
        >
          <Navbar.Brand className={this.state.className} as={Link} to="/">
            <img
              src={logo}
              alt="logo"
              style={{
                height: "50px",
                marginRight: "10px",
              }}
            />
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mr-auto"></Nav>
            <Nav className="links">
              <Nav.Link className="home-link" as={Link} to="/">
                Home
              </Nav.Link>
              <Nav.Link className="why-us-link" as={Link} to="/why-us">
                Why Us?
              </Nav.Link>
              <Nav.Link className="health-link" as={Link} to="/health&safety">
                Health & Safety
              </Nav.Link>
              <Nav.Link
                className="testimonials-link"
                as={Link}
                to="/testimonials" /*eventKey={2}*/
              >
                Testimonials
              </Nav.Link>
              <Nav.Link className="gallery-link" as={Link} to="/gallery">
                Gallery
              </Nav.Link>
              <Nav.Link className="contact-link" as={Link} to="/contact-us">
                Contact Us
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

export default Navigation;

我想将此蜡笔下划线图像 放在活动的导航链接之后。所以它应该是这样的

我尝试通过对不同页面使用一些 css 来实现这一点（例如，通过使用 home-link:after 属性）。但是导航链接下的所有下划线都是可见的，无论呈现哪个页面。那么我怎样才能做到这一点，以便蜡笔下划线仅出现在 active nav-link 下？

Answer 1

使用NavLink 而不是Link，默认情况下会将active 类添加到活动链接，否则您可以使用activeClassName 调整类或使用activeStyle。