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

首先，您需要有一个名为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.pathname

href

参考：这里