Is pages using the same document when switch route by next/link ?

[tangbc]

Hi, I try to use next/link by running the example with-loading, I both add a scroll event on pages/about.js and pages/forever.js like this:

pages/about.js:

componentDidMount () {
    document.addEventListener('scroll', this.onScroll.bind(this))
}
componentWillUnmount () {
    document.removeEventListener('scroll', this.onScroll.bind(this))
}
onScroll () {
    console.log('scroll in about page')
}

pages/forever.js:

componentDidMount () {
    document.addEventListener('scroll', this.onScroll.bind(this))
}
componentWillUnmount () {
    document.removeEventListener('scroll', this.onScroll.bind(this))
}
onScroll () {
    console.log('scroll in forever page')
}

When I switching page from about to forever or from forever to about, their scroll event are both effect：

scroll in about page
scroll in forever page
scroll in about page
scroll in forever page
scroll in about page
scroll in forever page
......

This is not happen if not use next/link. I wonder that if use next/link route there is using the same document between switching two pages? How can I sperate two pages scroll event both add on document?

Thank!

My Environment

Tech	Version
next	latest
node	7.7.0
OS	Mac
browser	Chrome

[osartun]

Being a single-page app, the document stays the same and only the contents are updated / swapped.

I assume that there's rather a problem with unbinding the event listeners. It looks like removing the event listener doesn't work properly as .bind(…) creates a new function reference. So, removeEventListener is basically trying to remove a listener that wasn't ever bound.

Try creating a single bound function reference in your constructor:

constructor(props) {
  super(props);
  // … Other code goes here

  // Bind your handler in the constructor to create
  // a single bound function
  this.onScroll = this.onScroll.bind(this);
}
componentDidMount () {
  // Now, you can use the function without calling .bind at this point
  document.addEventListener('scroll', this.onScroll)
}
componentWillUnmount () {
  // Thus, the same function is referenced to properly unbind it
  document.removeEventListener('scroll', this.onScroll)
}
onScroll () {
    console.log('scroll in about page')
}

The same thing for pages/forever.js.
I think that should fix your problem.

[tangbc]

@osartun Thank you! I got it.