2016-12-19 14:40:26 +00:00
|
|
|
import Router from 'next/router'
|
|
|
|
|
2016-12-20 20:39:15 +00:00
|
|
|
export default () => (
|
|
|
|
<div>
|
2017-02-09 16:32:01 +00:00
|
|
|
<Link href='/'>Home</Link>
|
|
|
|
<Link href='/about'>About</Link>
|
|
|
|
<Link href='/error'>Error</Link>
|
2016-12-20 20:39:15 +00:00
|
|
|
</div>
|
|
|
|
)
|
2016-12-19 14:40:26 +00:00
|
|
|
|
2016-12-20 20:39:15 +00:00
|
|
|
// typically you want to use `next/link` for this usecase
|
|
|
|
// but this example shows how you can also access the router
|
|
|
|
// and use it manually
|
2016-12-19 14:40:26 +00:00
|
|
|
|
2017-02-09 16:32:01 +00:00
|
|
|
function onClickHandler (href) {
|
|
|
|
return (e) => {
|
|
|
|
e.preventDefault()
|
|
|
|
Router.push(href)
|
2016-12-20 20:39:15 +00:00
|
|
|
}
|
|
|
|
}
|
2017-02-09 16:32:01 +00:00
|
|
|
|
|
|
|
const Link = ({ children, href }) => (
|
|
|
|
<a href='#' onClick={onClickHandler(href)}>
|
|
|
|
{children}
|
|
|
|
<style jsx>{`
|
|
|
|
a {
|
|
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
`}</style>
|
|
|
|
</a>
|
|
|
|
)
|