Clear page when transitioning to same route.

So I have these routes

var routes = (
    <Route handler={App}>
        <Route name="login" handler={Login}/>
        <Route name="logout" handler={Logout}/>
        <Route name="dashboard" path="/" handler={Dashboard} />
        <Route name="user" path="/users/:id" handler={ShowUser} />
    </Route>
);

I use the Link component to transfer between Dashboard and ShowUser which works fine. When I go from one User to another User(ie: users/1 to users/5) from the users page, the page doesn’t re render the way I would suspect. I’ve tried using componentWillRecieveProps but it doesn’t seem to re render everything. Plus I get Uncaught Error: Invariant Violation: processUpdates().

Is there a way to blow out the page and load the page like I was coming from another route? Thanks!

Edit: I solved this by using an isLoaded state and render the main page entry point when that’s set. I still would like to hear any comments about this. Thanks!

[gaearon]

@VinSpee @drewhamlett

You should handle it in componentWillReceiveProps in your handlers.

// SomeHandler.js
var SomeHandler = React.createClass({
  componentWillReceiveProps: function (nextProps) {
    if (this.props.params.id !== nextProps.params.id) {
      // do something to update your state
    }
  },

  // ...
})

// index.js
router.run(function (Handler, state) {
  React.render(<Handler params={state.params} />, document.body);
});

[gaearon]

@VinSpee

Minimizing state is good but you can have componentWillReceiveProps as I suggested in the component that has currentUser in state already.

Kind of like this. In your case,

getInitialState() {
  return this.getStateFromStores(this.props);
},

getStateFromStores(props) {
  return {
    currentUser: UserStore.get(parseInt(props.params.userId))
  };
},

componentWillReceiveProps(nextProps) {
  this.setState(this.getStateFromStores(nextProps));
}

Does this make sense?