如何在 Next.js 的活动页面上设置链接组件的样式

Posted 2023-03-07

【中文标题】如何在 Next.js 的活动页面上设置链接组件的样式

【英文标题】：How to style Link component when on active page on Next.js

【发布时间】：2021-05-09 16:46:02

【问题描述】：

我有一个关于在活动页面上设置锚组件样式的问题。

这是我的代码：

import Link from 'next/link';
import styled from 'styled-components';

const NavStyle = styled.nav`
    display: flex;
    justify-content: space-between;
    .nav-link a 
        text-decoration: none;
        color: white;
        padding: 10px;
        background-color: #FFCF00;
    
`;

export default function Nav() 
    return (
        <NavStyle>
            <div className="nav-link">
                <Link href="/" passHref>
                    <a>HOME</a>
                </Link>
                <Link href="/pricing">
                    <a>PRICING</a>
                </Link>
                <Link href="/terms">
                    <a>TERMS</a>
                </Link>
                <Link href="/login">
                    <a>LOGIN</a>
                </Link>
            </div>
            <Link href="/">
                <a>LOGO</a>
            </Link>
        </NavStyle>
    )

我想要的是，当我单击链接并移动到另一个页面时，活动链接（与 URL 匹配）将具有绿色背景。我试过这个，但没有任何改变：

const NavStyle = styled.nav`
    display: flex;
    justify-content: space-between;
    .nav-link a 
        text-decoration: none;
        color: white;
        padding: 10px;
        background-color: #FFCF00;
        &[aria-current] 
          background-color: green;
       
    
`;

【参考方案1】：

Next.js 不会将aria-current 添加到您的活动链接中；但是，您可以创建一个自定义的 Link 组件来检查当前的 pathname 是否与 href 属性相同。

import React from "react";
import Link from "next/link";
import  useRouter  from "next/router";

const NavLink = ( children, href ) => 
  const child = React.Children.only(children);
  const router = useRouter();

  return (
    <Link href=href>
      React.cloneElement(child, 
        "aria-current": router.pathname === href ? "page" : null
      )
    </Link>
  );
;

然后，当您想将aria-current 添加到活动链接时，您可以使用此组件而不是默认的Link：

const NavStyle = styled.nav`
  display: flex;
  justify-content: space-between;

  a 
    background-color: #353637;
    color: #fff;
    padding: 1rem;
    text-decoration: none;

    &[aria-current] 
      background-color: #faf9f4;
      color: #353637;
    
  
`;

export default function Nav() 
  return (
    <NavStyle>
      <div className="nav-link">
        <NavLink href="/">
          <a>HOME</a>
        </NavLink>
        <NavLink href="/pricing">
          <a>PRICING</a>
        </NavLink>
        <NavLink href="/terms">
          <a>TERMS</a>
        </NavLink>
        <NavLink href="/login">
          <a>LOGIN</a>
        </NavLink>
      </div>
      <Link href="/">
        <a>LOGO</a>
      </Link>
    </NavStyle>
  );