如何在使用 react-bootstrap 显示其页面时创建活动导航栏 link

Question

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

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

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

如果你想在这里查看整个存储库，它是：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 钩子然后你可以创建一些动态的 classNames:

// ...
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>
  );
}

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

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

.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>

如何在使用 react-bootstrap 显示其页面时创建活动导航栏 link

How to make an active navbar link when it shows its page using react-bootstrap

html

javascript

css

navbar

reactjs