如何在使用 react-bootstrap 显示其页面时创建一个活动的导航栏链接

Question

我正在使用 react bootstrap 并在我的投资组合应用程序的开发中做出反应，但是，我只需要添加一个小细节并且找不到正确的方法来做到这一点。

我需要使导航栏上的链接根据页面切换颜色，例如，如果我在主页上，导航栏上的“主页”颜色应该不同，等等。

这是我需要完成我的代码的最后一件事。

如果你想在这里查看整个存储库，它是： https://github.com/awadbilal/portfolio

这是我的导航栏代码：

import React from "react";
import { Link } from "react-router-dom";
import { Container, Navbar, Nav, NavDropdown } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import "./style.css";

function NavBar() {
  const { t } = useTranslation();
  // const { t, i18n } = useTranslation();

  // const changeLanguage = () => {
  //   if (i18n.language === "en") i18n.changeLanguage("ar");
  //   else i18n.changeLanguage("en");
  // };

  return (
    <>
      <Navbar className="navBarSection mt-3" collapseOnSelect expand="lg">
        <Container>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto pt-3 pb-3">
              <Nav.Link eventKey={1}>
                <Link to="/" className="underline">{t("nav.home")}</Link>
              </Nav.Link>
              <NavDropdown.Divider />
              <Nav.Link eventKey={2}>
                <Link to="/works" className="underline">{t("nav.works")}</Link>
              </Nav.Link>
              <NavDropdown.Divider />
              <Nav.Link eventKey={3}>
                <Link to="/education" className="underline">{t("nav.education")}</Link>
              </Nav.Link>
              <NavDropdown.Divider />
              <Nav.Link eventKey={4}>
                <Link to="/contact" className="underline">{t("nav.contact")}</Link>
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
          {/* <div className="languageButton" onClick={changeLanguage}>
            {i18n.language === "en" ? "AR" : "EN"}
          </div> */}
        </Container>
      </Navbar>
    </>
  );
}

export default NavBar;

这是它的外观：

Answer 1

从 React Router 导入useLocation钩子，然后你可以创建一些动态类名：

// ...
import React, { useEffect, useState } from 'react';
// Import useLocation hook
import { Link, useLocation } from 'react-router-dom';

function NavBar() {
  const location = useLocation(); // once ready it returns the 'window.location' object
  const [url, setUrl] = useState(null);
  useEffect(() => {
    setUrl(location.pathname);
  }, [location]);
  // ...
  return (
    // ... Just a dumbed down example:
    <Nav>
      <Link to="/" className={"underline" + (url === "/" ?" active" : "")}>Home</Link>
      <Link to="/projects" className={"underline" + (url === "/projects" ?" active" : "")}>Projects</Link>
      <Link to="/contact" className={"underline" + (url === "/contact" ?" active" : "")}>Contact</Link>
    </Nav>
  );
}

等等。 对每个链接执行此操作并添加路径名，它会按预期工作。

显然，在您的 CSS 中，您需要创建一个 class 以显示活动链接，例如：

.active {
  color: red;
}

Answer 2

你可以这样使用。

import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

class NavLink extends React.Component {
    render() {
        var isActive = this.context.router.route.location.pathname === this.props.to;
        var className = isActive ? 'active' : '';

        return(
            <Link className={className} {...this.props}>
                {this.props.children}
            </Link>
        );
    }
}

NavLink.contextTypes = {
    router: PropTypes.object
};

export default NavLink;

并在您的组件中使用它，如下所示：

...
import NavLink from "./nav_link";
.....

<nav>
   <ul className="nav nav-pills pull-right">
      <NavLink to="/">
         <i className="glyphicon glyphicon-home"></i> <span>Home</span>
      </NavLink>
      <NavLink to="about">
         <i className="glyphicon glyphicon-camera"></i> <span>About</span>
      </NavLink>
   </ul>
</nav>