1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/test/integration/basic/pages/nav/as-path-pushstate.js
tangye ad5431b4ae
should not change method to replaceState unless asPath is the same (#6033)
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.
2019-01-11 15:44:25 -06:00

27 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>
})