Question

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

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属性）来实现这一点。但是导航链接下的所有下划线都是可见的，与呈现哪个页面无关。那么，如何才能做到这一点，使蜡笔下划线仅出现在活动导航链接下？

Answer 1

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

反应路由器链接

1 个答案: