terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

added "hashChangeStart" and "hashChangeComplete" events (#4234)

Browse source 
This PR adds events for when there is a hash-only change in the URL. This is needed because `window.addEventListener('hashchange', ...)` does not work with next.js because it is using pushState.
This commit is contained in:
andy-viv 2018-05-25 05:47:58 -07:00 committed by Tim Neutkens
parent 4e8009c107
commit 2b16d8b2ac
3 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/router/index.js
View file

@ -15,7 +15,7 @@ const SingletonRouter = {
// Create public properties and methods of the router in the SingletonRouter
const propertyFields = ['components', 'pathname', 'route', 'query', 'asPath']
const routerEvents = ['routeChangeStart', 'beforeHistoryChange', 'routeChangeComplete', 'routeChangeError']
const routerEvents = ['routeChangeStart', 'beforeHistoryChange', 'routeChangeComplete', 'routeChangeError', 'hashChangeStart', 'hashChangeComplete']
const coreMethodFields = ['push', 'replace', 'reload', 'back', 'prefetch', 'beforePopState']
propertyFields.forEach((field) => {

2
lib/router/router.js
View file

@ -148,8 +148,10 @@ export default class Router {
// If the url change is only related to a hash change
// We should not proceed. We should only change the state.
if (this.onlyAHashChange(as)) {
this.events.emit('hashChangeStart', as)
this.changeState(method, url, as)
this.scrollToHash(as)
this.events.emit('hashChangeComplete', as)
return true
}

2
readme.md
View file

@ -555,6 +555,8 @@ Here's a list of supported events:
- `onRouteChangeComplete(url)` - Fires when a route changed completely
- `onRouteChangeError(err, url)` - Fires when there's an error when changing routes
- `onBeforeHistoryChange(url)` - Fires just before changing the browser's history
- `onHashChangeStart(url)` - Fires when the hash will change but not the page
- `onHashChangeComplete(url)` - Fires when the hash has changed but not the page
> Here `url` is the URL shown in the browser. If you call `Router.push(url, as)` (or similar), then the value of `url` will be `as`.