如何像在React-Router-4中那样将Next.js中的活动Link作为目标?意思是,当其路由处于活动状态时,给活动链接一个类?
首先,您需要有一个名为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来区分活动链接和非活动链接。
: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以使该链接看起来已激活。
router.pathname
href
参考:这里