2017-01-12 05:14:49 +01:00
|
|
|
import Link from 'next/link'
|
|
|
|
import { Component } from 'react'
|
2017-03-12 04:57:51 +01:00
|
|
|
import Router from 'next/router'
|
2017-01-12 05:14:49 +01:00
|
|
|
|
|
|
|
let counter = 0
|
|
|
|
|
2017-01-20 20:33:46 +01:00
|
|
|
const linkStyle = {
|
2019-11-11 04:24:53 +01:00
|
|
|
marginRight: 10,
|
2017-01-20 20:33:46 +01:00
|
|
|
}
|
|
|
|
|
2017-01-12 05:14:49 +01:00
|
|
|
export default class extends Component {
|
2019-11-11 04:24:53 +01:00
|
|
|
increase() {
|
2017-01-12 05:14:49 +01:00
|
|
|
counter++
|
|
|
|
this.forceUpdate()
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
visitQueryStringPage() {
|
2017-03-12 04:57:51 +01:00
|
|
|
const href = { pathname: '/nav/querystring', query: { id: 10 } }
|
|
|
|
const as = { pathname: '/nav/querystring/10', hash: '10' }
|
|
|
|
Router.push(href, as)
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
render() {
|
2017-01-12 05:14:49 +01:00
|
|
|
return (
|
2019-11-11 04:24:53 +01:00
|
|
|
<div className="nav-home">
|
|
|
|
<Link href="/nav/about">
|
|
|
|
<a id="about-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
About
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/empty-get-initial-props">
|
|
|
|
<a id="empty-props" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
Empty Props
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/self-reload">
|
|
|
|
<a id="self-reload-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
Self Reload
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/shallow-routing">
|
|
|
|
<a id="shallow-routing-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
Shallow Routing
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/redirect">
|
|
|
|
<a id="redirect-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
Redirect
|
|
|
|
</a>
|
|
|
|
</Link>
|
2017-03-12 04:57:51 +01:00
|
|
|
<Link
|
|
|
|
href={{ pathname: '/nav/querystring', query: { id: 10 } }}
|
|
|
|
as={{ pathname: '/nav/querystring/10', hash: '10' }}
|
|
|
|
>
|
2019-11-11 04:24:53 +01:00
|
|
|
<a id="query-string-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
QueryString
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/about" replace>
|
|
|
|
<a id="about-replace-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
Replace state
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/as-path" as="/as/path">
|
|
|
|
<a id="as-path-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
As Path
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/as-path">
|
|
|
|
<a id="as-path-link-no-as" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
As Path (No as)
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/as-path-using-router">
|
|
|
|
<a id="as-path-using-router-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
As Path (Using Router)
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/on-click?count=1">
|
|
|
|
<a id="on-click-link" style={linkStyle}>
|
2019-05-30 03:19:32 +02:00
|
|
|
A element with onClick
|
|
|
|
</a>
|
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/about">
|
|
|
|
<a id="target-link" target="_blank">
|
2019-05-30 03:19:32 +02:00
|
|
|
A element with target
|
|
|
|
</a>
|
|
|
|
</Link>
|
2017-03-12 04:57:51 +01:00
|
|
|
<button
|
|
|
|
onClick={() => this.visitQueryStringPage()}
|
|
|
|
style={linkStyle}
|
2019-11-11 04:24:53 +01:00
|
|
|
id="query-string-button"
|
2017-03-12 04:57:51 +01:00
|
|
|
>
|
|
|
|
Visit QueryString Page
|
|
|
|
</button>
|
|
|
|
|
2017-01-12 05:14:49 +01:00
|
|
|
<p>This is the home.</p>
|
2019-11-11 04:24:53 +01:00
|
|
|
<div id="counter">Counter: {counter}</div>
|
|
|
|
<button id="increase" onClick={() => this.increase()}>
|
2019-05-30 03:19:32 +02:00
|
|
|
Increase
|
|
|
|
</button>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/hash-changes#item-400">
|
|
|
|
<a id="scroll-to-hash">Scroll to hash</a>
|
2019-05-30 03:19:32 +02:00
|
|
|
</Link>
|
2017-01-12 05:14:49 +01:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|