Next.js: Router.push not causing page mount when going to same page with different query string

[gragland]

When using Router.push to route to the same page but with a different query string value the page is not remounted. Instead, both getInitialProps and componentWillReceiveProps are executed. Is this the intended behavior?

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would expect the current page component to unmount (componentWillUnmount should fire) and the new page to mount (componentDidMount should fire). If people want to shallow route they can use the Router shallow:true option.

Current Behavior

Steps to Reproduce (for bugs)

import { Component } from 'react';
import Router from 'next/router';

class PageTest extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.goToPage = this.goToPage.bind(this);
  }

  static async getInitialProps({ query }){
    console.log('getInitialProps');
    return {
      pageId: query.pageId 
    }
  }

  componentWillReceiveProps(nextProps){
    console.log('componentWillReceiveProps', nextProps);
  }

  componentDidMount(){
    console.log('componentDidMount');
  }

  componentWillUnmount(){
    console.log('componentWillUnmount');
  }

  goToPage(e){
    e.preventDefault();

    const { pageId } = this.props;
    const nextPageId = pageId === 'a' ? 'b' : 'a';

    Router.push(
      `/page-test?pageId=${nextPageId}`,
      `/page-test/${nextPageId}`,
      //{ shallow: false } // Doesn't do anything
    );
  }

  render() {
    return (
      <div>
        <a href="#" onClick={this.goToPage}>Go to other page</a>
      </div>
    );
  }
}

export default PageTest;

Context

Your Environment

| Tech | Version |
|---------|---------|
| next | 3.0.6 |
| node | 8.1.4 |
| OS | OSX |
| browser | Chrome |
| etc | |

[eezing]

@gragland I believe the current behavior is the expected behavior. I see your point and it could be worth a discussion.

[timneutkens]

This is indeed the expected behaviour.
For example react-router has the same behaviour when going to pages on the same routing level.

[gragland]

@eezing @timneutkens Okay thanks for confirming. Any thoughts on whether you think this is something that could/should be changed? It seems counterintuitive to me. Imagine a product page with a list of recommended products below. Having to handle the transition between the pages /product/{productA} and product/productB in componentWillReceiveProps adds a lot of extra complexity.

[arunoda]

This is not a bad thing. This is a feature.
This is the only you could do animations and changes view without re-rendering the page.

[gragland]

@arunoda Sorry if I'm missing something, but isn't that what shallow routing is for? I could shallow route from one product page to another if I wanted to do an animated transition.

[arunoda]

@gragland shallow doesn't run getInitialProps.

[aulneau]

@arunoda is there a way to disable shallow routing for same-page query string changes?

[aulneau]

@arunoda @gragland I fixed my issues by adding a unique key to the component, it will cause it to remount :)

[vivekiyer114]

How did you add that unique key ?
Please help out with a snippet!
Thanks !

[aulneau]

@vivekiyer114 you could use -> https://github.com/dylang/shortid

My pages have a uid from the api I'm getting data from, so that was what I was using.

it would just be <Component key={my.item.uid} />, replace my.item.uid with another unique key that you can use.

[vivekiyer114]

Thanks a lot @aulneau

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.