如何在 Next.js 上的活动页面上设置链接组件的样式 [英] How to style Link component when on active page on Next.js

问题描述

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

这是我的代码:

从'next/link'导入链接；从样式组件"导入样式；const NavStyle = styled.nav`显示:弹性；对齐内容:间隔；.nav-link a {文字装饰:无；白颜色;填充:10px；背景色:#FFCF00；}`;导出默认函数 Nav() {返回 (<导航样式><div className="nav-link"><Link href="/";passHref><a>家</a></链接><Link href="/pricing"><a>定价</a></链接><Link href="/terms"><a>条款</a></链接><Link href="/login"><a>登录</a></链接>

<Link href="/"><a>LOGO</a></链接></NavStyle>)}

我想要的是，当我点击链接并移动到另一个页面时，活动链接(与 URL 匹配)将具有绿色背景.我试过这个，但它没有做任何改变:

const NavStyle = styled.nav`显示:弹性；对齐内容:间隔；.nav-link a {文字装饰:无；白颜色;填充:10px；背景色:#FFCF00；&[aria-current] {背景颜色:绿色；}}`;

解决方案

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

从react"导入 React；从下一个/链接"导入链接；import { useRouter } from next/router";const NavLink = ({ children, href }) =>{const child = React.Children.only(children);const 路由器 = useRouter();返回 (<链接 href={href}>{React.cloneElement(孩子，{aria-current":router.pathname === href ?页面": 空值})}</链接>);};

然后，只要您想将 aria-current 添加到活动链接，就可以使用此组件代替默认的 Link:

const NavStyle = styled.nav`显示:弹性；对齐内容:间隔；一种 {背景颜色:#353637；颜色:#fff;填充:1rem；文字装饰:无；&[aria-current] {背景色:#faf9f4；颜色:#353637；}}`;导出默认函数 Nav() {返回 (<导航样式><div className="nav-link"><NavLink href="/"><a>家</a></NavLink><NavLink href="/pricing"><a>定价</a></NavLink><NavLink href="/terms"><a>条款</a></NavLink><NavLink href="/login"><a>登录</a></NavLink>

<Link href="/"><a>LOGO</a></链接></NavStyle>);}

I have a question about styling an anchor component when it is on the active page.

Here is my code:

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>
    )
}

What I want is, when the I click on the link and move to another page, the active link (that's matched with the URL) would have a green background. I have tried this, but it doesn't make any change:

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;
       }
    }
`;

解决方案

Next.js won't add aria-current to your active link; however, you can create a custom Link component that checks if the current pathname is the same as the href prop.

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

Then, you can use this component instead of the default Link whenever you want to add aria-current to the active 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>
  );
}

这篇关于如何在 Next.js 上的活动页面上设置链接组件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！