当路由在 Next.js 中处于活动状态时，目标活动链接 [英] Target Active Link when the route is active in Next.js

问题描述

如何像我们在 React-Router-4 中那样定位 Next.js 中的活动链接?意思是，当它的路由处于活动状态时，给活动链接一个类?

解决方案

首先，你需要有一个名为Link的组件，带有临时属性activeClassName

import { useRouter } from 'next/router'从 'prop-types' 导入 PropTypes从下一个/链接"导入链接导入 React, { Children } from 'react'const ActiveLink = ({ children, activeClassName, ...props }) =>{const { asPath } = useRouter()const child = Children.only(children)const childClassName = child.props.className ||''//pages/index.js 将通过 props.href 匹配//pages/about.js 将通过 props.href 进行匹配//pages/[slug].js 将通过 props.as 匹配const 类名 =asPath === props.href ||asPath === props.as?`${childClassName} ${activeClassName}`.trim(): 子类名返回 (<链接{...道具}>{React.cloneElement(孩子，{类名:类名 ||空值，})}</链接>)}ActiveLink.propTypes = {activeClassName: PropTypes.string.isRequired,}导出默认 ActiveLink

然后有一个带有创建的组件链接和 css 选择器 :active 的导航栏来区分活动和非活动链接.

从'./ActiveLink'导入ActiveLinkconst Nav = () =>(<导航><样式jsx>{`.导航链接{文字装饰:无；}.active:在{之后内容:'(当前页面)';}`}</style><ul className="nav"><li><ActiveLink activeClassName="active";href="/"><a className="nav-link">Home</a></ActiveLink><li><ActiveLink activeClassName="active";href="/about"><a className="nav-link">关于</a></ActiveLink><li><ActiveLink activeClassName="active";href="/[slug]";as=/dynamic-route"><a className=nav-link">动态路由</a></ActiveLink></nav>)导出默认导航

之后，您就可以在您的页面上实现导航栏了:

从'../components/Nav'导入导航导出默认值 () =>(<div><导航/><p>您好，我是首页</p>

)

这个工作的关键是在组件Link里面，我们比较router.pathname的值和Link中的属性href，如果值匹配其他然后输入特定的类名以使链接看起来激活.

参考:这里

How to target the active Link in Next.js like they way we do it in React-Router-4? Meaning, give the active link a class when its route is active?

解决方案

First, you need to have a component called Link, with temporary attribute activeClassName

import { useRouter } from 'next/router'
import PropTypes from 'prop-types'
import Link from 'next/link'
import React, { Children } from 'react'

const ActiveLink = ({ children, activeClassName, ...props }) => {
  const { asPath } = useRouter()
  const child = Children.only(children)
  const childClassName = child.props.className || ''

  // pages/index.js will be matched via props.href
  // pages/about.js will be matched via props.href
  // pages/[slug].js will be matched via props.as
  const className =
    asPath === props.href || asPath === props.as
      ? `${childClassName} ${activeClassName}`.trim()
      : childClassName

  return (
    <Link {...props}>
      {React.cloneElement(child, {
        className: className || null,
      })}
    </Link>
  )
}

ActiveLink.propTypes = {
  activeClassName: PropTypes.string.isRequired,
}

export default ActiveLink

Then have a navigation bar with created component Link and css selector :active to differentiate between active and inactive link.

import ActiveLink from './ActiveLink'

const Nav = () => (
  <nav>
    <style jsx>{`
      .nav-link {
        text-decoration: none;
      }
      .active:after {
        content: ' (current page)';
      }
    `}</style>
    <ul className="nav">
      <li>
        <ActiveLink activeClassName="active" href="/">
          <a className="nav-link">Home</a>
        </ActiveLink>
      </li>
      <li>
        <ActiveLink activeClassName="active" href="/about">
          <a className="nav-link">About</a>
        </ActiveLink>
      </li>
      <li>
        <ActiveLink activeClassName="active" href="/[slug]" as="/dynamic-route">
          <a className="nav-link">Dynamic Route</a>
        </ActiveLink>
      </li>
    </ul>
  </nav>
)

export default Nav

After that, you can implement the navigation bar to your page:

import Nav from '../components/Nav'

export default () => (
  <div>
    <Nav />
    <p>Hello, I'm the home page</p>
  </div>
)

The key of how does this work is located inside component Link, we compare the value of router.pathname with attribute href from the Link, if the value match the other then put specific className to make the link looks activated.

Reference: here

这篇关于当路由在 Next.js 中处于活动状态时，目标活动链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！