路由在 Next.js 中处于活动状态时的目标活动链接

Question

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

原文由 Ruby 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

基于 useRouter 钩子的简单解决方案：

 import Link from "next/link";
import { useRouter } from "next/router";

export const MyNav = () => {

  const router = useRouter();

  return (
    <ul>
      <li className={router.pathname == "/" ? "active" : ""}>
        <Link href="/">home</Link>
      </li>
      <li className={router.pathname == "/about" ? "active" : ""}>
        <Link href="/about">about</Link>
      </li>
    </ul>
  );
};

如果要包含 url 查询参数，也可以使用 router.asPath 而不是 router.pathname 。如果您想处理锚标记，例如 /#about ，这将很有用。

原文由 Rotareti 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

首先，您需要有一个名为 Link 的组件，具有临时属性 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

然后有一个导航栏，其中包含创建的组件链接和 css 选择器 :active 以区分活动链接和非活动链接。

 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

之后，您可以将导航栏实现到您的页面：

 import Nav from '../components/Nav'

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

这项工作的关键位于组件 Link 内部，我们将 router.pathname 的值与 Link 中的属性 href 进行比较，如果值与另一个匹配，则将特定的类名放入 make该链接看起来已激活。

参考： 这里

原文由 Darryl RN 发布，翻译遵循 CC BY-SA 4.0 许可协议