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

【问题标题】：How to make an active navbar link when it shows its page using react-bootstrap如何在使用 react-bootstrap 显示其页面时创建一个活动的导航栏链接
【发布时间】：2022-01-05 00:58:00
【问题描述】：

我在开发我的投资组合应用程序时使用 react bootstrap 和 react，但是，我只需要添加一个小细节，但找不到合适的方法。

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

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

如果你想在这里查看整个存储库：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;

它应该是这样的：

【问题讨论】：

@Henry Ecker 我试过你的方法它仍然不起作用，我不确定是什么导致这个问题发生，我尝试了多种方法，但我仍然找不到答案。
我刚刚编辑了您的帖子。也许您是想回复下面回答您问题的用户？
@Henry Ecker 哦，是的，对不起，我还是个新手，我以前只检查过其他问题。

标签： javascript html css reactjs navbar

【解决方案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 中，您需要创建一个类来显示活动链接，例如：

.active {
  color: red;
}

【讨论】：

我试过你的方法还是不行，我不确定是什么导致这个问题发生，我尝试了多种方法，但我仍然找不到答案。
具体什么不起作用？你添加了CSS吗？你完全理解代码吗？（所以你可以正确地调整它。）
谢谢，之前不知什么原因没用，今天又试了一次，一开始检查没用，我停止了react app运行，然后又重新初始化了现在它可以工作了，在重新运行应用程序之前不确定是什么导致它无法工作。

【解决方案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>

【讨论】：