๐Ÿ“šย Reference

๐Ÿ“œย Chapter

next/navigation

next/router

import { useRouter } from 'next/router'

userRouter

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

router.push

router.push(url, as, options)