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

Question

我在开发我的投资组合应用程序时使用了 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;

它应该是这样的：

Answer 1

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

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

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

更新

现在使用 React Router 6 的<NavLink>组件，您可以通过读取isActive传递给 prop 内函数的参数来轻松实现这一点className：

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

function NavBar() {
  // ...
  return (
    <Nav>
      <NavLink to="/" className={({ isActive }) => "underline" + isActive ? " active" : ""}>Home</Link>
      <NavLink to="/projects" className={({ isActive }) => "underline" + isActive ? " active" : ""}>Projects</Link>
      <NavLink to="/contact" className={({ isActive }) => "underline" + isActive ? " active" : ""}>Contact</Link>
    </Nav>
  );
}

这使得我们的工作更加灵活，而不是硬编码。