mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
26 lines
565 B
JavaScript
26 lines
565 B
JavaScript
|
import { withRouter } from 'next/router'
|
||
|
|
|
||
|
|
// typically you want to use `next/link` for this usecase
|
||
|
|
// but this example shows how you can also access the router
|
||
|
|
// using the withRouter utility.
|
||
|
|
|
||
|
|
const ActiveLink = ({ children, router, href }) => {
|
||
|
|
const style = {
|
||
|
|
marginRight: 10,
|
||
|
|
color: router.pathname === href ? 'red' : 'black'
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleClick = (e) => {
|
||
|
|
e.preventDefault()
|
||
|
|
router.push(href)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<a href={href} onClick={handleClick} style={style}>
|
||
|
|
{children}
|
||
|
|
</a>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default withRouter(ActiveLink)
|