小编典典

当路由在Next.js中处于活动状态时,将目标活动链接定位

reactjs

如何像在React-Router-4中那样将Next.js中的活动Link作为目标?意思是,当其路由处于活动状态时,给活动链接一个类?


阅读 295

收藏
2020-07-22

共1个答案

小编典典

首先,您需要有一个名为Link的组件,其临时属性为activeClassName

import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'

const ActiveLink = ({ router, children, ...props }) => {
  const child = Children.only(children)

  let className = child.props.className || null
  if (router.pathname === props.href && props.activeClassName) {
    className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
  }

  delete props.activeClassName

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

export default withRouter(ActiveLink)

然后,使用带有创建的组件链接和CSS选择器的导航栏:active来区分活动链接和非活动链接。

import Link from './Link'

export default () => (
  <nav>
    <style jsx>{`
      .active:after {
        content: ' (current page)';
      }
      .nav-link {
        text-decoration: none;
        padding: 10px;
        display: block;
      }
    `}</style>

    <ul>
      <li>
        <Link activeClassName='active' href='/'>
          <a className='nav-link home-link'>Home</a>
        </Link>
      </li>
      <li>
        <Link activeClassName='active' href='/about'>
          <a className='nav-link'>About</a>
        </Link>
      </li>
    </ul>
  </nav>
)

之后,您可以在页面上实现导航栏:

import Nav from '../components/Nav'

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

如何工作的关键位于组件Link内,我们将Link中的router.pathnamewith
值与属性进行比较href,如果该值与另一个属性匹配,则放置特定的className以使该链接看起来已激活。

参考:这里

2020-07-22