mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
669225263d
Allow `onClick` on `next/link` child. This should not be a breaking change, but it's a very useful feature. Real-life use cases include: analytics or closing menu on navigation, and other. - [x] allow optional `onClick` on `next/link` component's child - [x] call original `child.props.onClick(e)` before `this.linkClicked(e)` - [x] add integration tests - [x] cancel the navigation if `e.defaultPrevented === true` Fixes #1490
59 lines
2.2 KiB
JavaScript
59 lines
2.2 KiB
JavaScript
import Link from 'next/link'
|
|
import { Component } from 'react'
|
|
import Router from 'next/router'
|
|
|
|
let counter = 0
|
|
|
|
const linkStyle = {
|
|
marginRight: 10
|
|
}
|
|
|
|
export default class extends Component {
|
|
increase () {
|
|
counter++
|
|
this.forceUpdate()
|
|
}
|
|
|
|
visitQueryStringPage () {
|
|
const href = { pathname: '/nav/querystring', query: { id: 10 } }
|
|
const as = { pathname: '/nav/querystring/10', hash: '10' }
|
|
Router.push(href, as)
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<div className='nav-home'>
|
|
<Link href='/nav/about'><a id='about-link' style={linkStyle}>About</a></Link>
|
|
<Link href='/empty-get-initial-props'><a id='empty-props' style={linkStyle}>Empty Props</a></Link>
|
|
<Link href='/nav/self-reload'><a id='self-reload-link' style={linkStyle}>Self Reload</a></Link>
|
|
<Link href='/nav/shallow-routing'><a id='shallow-routing-link' style={linkStyle}>Shallow Routing</a></Link>
|
|
<Link href='/nav/redirect'><a id='redirect-link' style={linkStyle}>Redirect</a></Link>
|
|
<Link
|
|
href={{ pathname: '/nav/querystring', query: { id: 10 } }}
|
|
as={{ pathname: '/nav/querystring/10', hash: '10' }}
|
|
>
|
|
<a id='query-string-link' style={linkStyle}>QueryString</a>
|
|
</Link>
|
|
<Link href='/nav/about' replace><a id='about-replace-link' style={linkStyle}>Replace state</a></Link>
|
|
<Link href='/nav/as-path' as='/as/path'><a id='as-path-link' style={linkStyle}>As Path</a></Link>
|
|
<Link href='/nav/as-path'><a id='as-path-link-no-as' style={linkStyle}>As Path (No as)</a></Link>
|
|
<Link href='/nav/as-path-using-router'><a id='as-path-using-router-link' style={linkStyle}>As Path (Using Router)</a></Link>
|
|
<Link href='/nav/on-click'><a id='on-click-link' style={linkStyle}>A element with onClick</a></Link>
|
|
<button
|
|
onClick={() => this.visitQueryStringPage()}
|
|
style={linkStyle}
|
|
id='query-string-button'
|
|
>
|
|
Visit QueryString Page
|
|
</button>
|
|
|
|
<p>This is the home.</p>
|
|
<div id='counter'>
|
|
Counter: {counter}
|
|
</div>
|
|
<button id='increase' onClick={() => this.increase()}>Increase</button>
|
|
</div>
|
|
)
|
|
}
|
|
}
|