ad5431b4ae
original code in `/lib/router/router.js`
```
urlIsNew (pathname, query) {
return this.pathname !== pathname || !shallowEquals(query, this.query)
}
```
the urlIsNew compare `this.pathname` to an argument `pathname`
the invokers:
```
// If asked to change the current URL we should reload the current page
// (not location.reload() but reload getInitialProps and other Next.js stuffs)
// We also need to set the method = replaceState always
// as this should not go into the history (That's how browsers work)
if (!this.urlIsNew(asPathname, asQuery)) {
method = 'replaceState'
}
```
the parameter here is `asPathname` destructured from `asPath`
so here is a problem when we reuse a single page rendered in two asPaths
pages/a.js
```
<>
<Link href='/a'><a>goto a</a></Link>
<Link href='/a' as='/b'><a>goto b</a></Link>
</>
```
If we navigate to page /a, then click 'goto b', actually the history is replaced, not pushed.
It is expected that history could be correctly pushed and popped as long as the browser url is changed.
26 lines
851 B
JavaScript
26 lines
851 B
JavaScript
import Link from 'next/link'
|
|
import {withRouter} from 'next/router'
|
|
|
|
export default withRouter(({router: {asPath, query}}) => {
|
|
return <div id={asPath.replace('/', '').replace('/', '-')}>
|
|
<div id='router-query'>{JSON.stringify(query)}</div>
|
|
<div>
|
|
<Link href='/nav/as-path-pushstate?something=hello' as='/something/hello'>
|
|
<a id='hello'>hello</a>
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<Link href='/nav/as-path-pushstate' as='/something/else'>
|
|
<a id='else'>else</a>
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<Link href='/nav/as-path-pushstate' as='/nav/as-path-pushstate'>
|
|
<a id='hello2'>normal hello</a>
|
|
</Link>
|
|
</div>
|
|
{query.something === 'hello' && <Link href='/nav/as-path-pushstate?something=hello' as='/something/same-query'>
|
|
<a id='same-query'>same query</a>
|
|
</Link>}
|
|
</div>
|
|
})
|