如果页面地址与 link 匹配，则在 link 上方创建黄色 div

Question

我有一个导航栏，其中包含一个无序列表和多个包含各个页面的 link 项的项目。

如果我在当前页面上，我希望 link 上方出现一个黄色框。如您所见，我制作了黄色框，我正在尝试考虑使该框出现在并发页面上的最佳方法，有什么想法吗？

我正在谈论的部分：

const linkStyle = css`
    text-decoration: none;
    font-family: "Montserrat";
    position: relative;
    font-weight: 300;
    font-style: normal;
    color: ${theme.colors.text};
    &::after {
      background-color: ${theme.colors.primary};
      width: 150%;
      height: 40px;
      content: "";
      position: absolute;
      transform: translateX(-50%);
      top: -50px;
      left: 50%;
   }
  `;

完整文件Header.jsx

import React from "react";
import { css } from "emotion";
import { useTheme } from "emotion-theming";

const Header = () => {
  const theme = useTheme();
  const headerStyle = css`
    position: absolute;
    top: 0;
    right: 0;
  `;

  const navStyle = css`
    width: 1093px;
    position: relative;
    background-color: ${theme.colors["bg-nav"]};
    display: flex;
    justify-content: right;
    height: 109px;
  `;
  const accountStyle = css`
    width: 428px;
    height: 109px;
    background-color: ${theme.colors["alt-red"]};
  `;

  const ulStyle = css`
    box-sizing: border-box;
    padding: 0;
    display: flex;
    margin: 0;
    font-size: 1rem;
    align-items: center;
    list-style: none;
  `;

  const itemStyle = css`
    box-sizing: border-box;
    padding: 0 30px;
  `;

  const linkStyle = css`
    text-decoration: none;
    font-family: "Montserrat";
    position: relative;
    font-weight: 300;
    font-style: normal;
    color: ${theme.colors.text};
    &::after {
      background-color: ${theme.colors.primary};
      width: 150%;
      height: 40px;
      content: "";
      position: absolute;
      transform: translateX(-50%);
      top: -50px;
      left: 50%;
    }
  `;

  return (
    <header className={headerStyle}>
      <nav className={navStyle}>
        <ul className={ulStyle}>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Home
            </a>
          </li>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Menu
            </a>
          </li>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Gallery
            </a>
          </li>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Testiminials
            </a>
          </li>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Contact Us
            </a>
          </li>
        </ul>
        <div className={accountStyle}></div>
      </nav>
    </header>
  );
};

export default Header;

Answer 1

我认为这取决于您用于路由的库，因为每个库的做法都不同。假设您使用的是最流行的 (afaik) React Router 库，那么这就是使用 <NavLink> 而不是 <Link> 的情况。当当前 URL 与 <NavLink> 匹配时，您可以将自定义 class 添加到 activeClassName。

这是我所指的 link：https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom

考虑到这一点，以下是您需要执行的操作的简化版本：

import React from "react";
import { css } from "emotion";
import { useTheme } from "emotion-theming";
import { NavLink } from 'react-router-dom';

const Header = () => {
  const activeClass = css`
    /* active css styles go here */
  `;

  return (
    <header>
      <nav>
        <ul>
          <li>
            <NavLink exact to="/" className={linkStyle} activeClassName={activeClass}>
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/menu" className={linkStyle} activeClassName={activeClass}>
              Menu
            </NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

如果页面地址与 link 匹配，则在 link 上方创建黄色 div

Create yellow div above the link if page address matches the link

javascript

css

emotion

reactjs