import { withRouter } from 'next/router'

const Link = withRouter(({ router, children, href }) => {
  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <div>
      <span id="pathname">Current path: {router.pathname}</span>
      <span id="asPath">Current asPath: {router.asPath}</span>
      <a href="#" onClick={handleClick}>
        {children}
      </a>
    </div>
  )
})

export default () => (
  <div className="nav-with-hoc">
    <Link href="/nav">Go Back</Link>
    <p>This is the about page.</p>
  </div>
)