React-router: Same component mount after route change

[evgenyrodionov]

Hi!

I have that definition:

  <Route handler={PropertiesView} name="properties" path=":dealKind" />

In PropertiesView I have constructor and componentDidMount handler. In both I trying catch (with console.log(this.props.params) new dealKind (sale or rent, for example), but it works only in render. Why component doesn't unmount after params change?

[taurose]

When only the params change and the same handler is rendered, the handler won't remount; it'll only be rerendered, just like children in React won't be remounted by changing their props (except key). So you don't get componentDidMount, but componentWillReceiveProps.

[evgenyrodionov]

Well, componentWillReceiveProps works great, you're right. Thanks!

[BernhardBehrendt]

Hi @theaqua your comment helped me a lot initially but I ran into a further problem when using componentWillReceiveProps

My problem is that when componentWillReceiveProps is executed there are still the old (previous ) properties (this.props.params) present..

I was able to write a 'dirty' workaround using timeout.

 componentWillReceiveProps() {
     setTimeout(function () {
         this.toApiUrl(this.props.params);
     }.bind(this), 1);
 }

Do you have any suggestions how to get it?

[calmdev]

@BernhardBezdek you need to look at nextProps.

componentWillReceiveProps(nextProps) { ... }

http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

[L3V147H4N]

is there a way to remount manually?

[ferggren]

Some kind of manual remount

  componentWillReceiveProps(nextProps) {
    this.componentWillUnmount();
    this.setState(
      this.getInitialState(nextProps),
      this.componentDidMount
    );
  }

  getInitialState(props) {
    props = props || this.props;
    // props.params, etc

    return {
      //...
    }
  }