2017-03-06 17:48:35 +01:00
|
|
|
import { Component } from 'react'
|
|
|
|
import Link from 'next/link'
|
|
|
|
import Router from 'next/router'
|
|
|
|
|
|
|
|
let getInitialPropsRunCount = 1
|
|
|
|
|
|
|
|
const linkStyle = {
|
2019-11-11 04:24:53 +01:00
|
|
|
marginRight: 10,
|
2017-03-06 17:48:35 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class extends Component {
|
2019-11-11 04:24:53 +01:00
|
|
|
static getInitialProps({ res }) {
|
2017-03-06 17:48:35 +01:00
|
|
|
if (res) return { getInitialPropsRunCount: 1 }
|
|
|
|
getInitialPropsRunCount++
|
|
|
|
|
|
|
|
return { getInitialPropsRunCount }
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
getCurrentCounter() {
|
2018-08-07 05:53:06 +02:00
|
|
|
const { url } = this.props
|
|
|
|
return url.query.counter ? parseInt(url.query.counter) : 0
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
increase() {
|
2017-03-06 17:48:35 +01:00
|
|
|
const counter = this.getCurrentCounter()
|
|
|
|
const href = `/nav/shallow-routing?counter=${counter + 1}`
|
|
|
|
Router.push(href, href, { shallow: true })
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
render() {
|
2017-03-06 17:48:35 +01:00
|
|
|
return (
|
2019-11-11 04:24:53 +01:00
|
|
|
<div className="shallow-routing">
|
|
|
|
<Link href="/nav">
|
|
|
|
<a id="home-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
Home
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<div id="counter">Counter: {this.getCurrentCounter()}</div>
|
|
|
|
<div id="get-initial-props-run-count">
|
2017-03-06 17:48:35 +01:00
|
|
|
getInitialProps run count: {this.props.getInitialPropsRunCount}
|
|
|
|
</div>
|
2019-11-11 04:24:53 +01:00
|
|
|
<button id="increase" onClick={() => this.increase()}>
|
2019-05-30 03:19:32 +02:00
|
|
|
Increase
|
|
|
|
</button>
|
2017-03-06 17:48:35 +01:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|