React-router: Clear page when transitioning to same route.

Created on 7 Dec 2014 · 7Comments · Source: ReactTraining/react-router

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!

Source

drewhamlett

Most helpful comment

@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 on 2 Jan 2015

🎉5 👍2

All 7 comments

I'm having a similar issue. I'd like to implement a previous and next navigation style, but can not get the /users/:id view to rerender when following a link.

VinSpee on 2 Jan 2015

@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 on 2 Jan 2015

🎉5 👍2

But I'm trying to separate it as such:

<Header prev={getPreviousLink(currentID)} next={getNextLink(currentID)}>
<RouteHandler user={this.state.currentUser} />

Don't I want to minimize state and not have to hit my store from the User component by passing it in as props?

Is this a bad idea?

VinSpee on 2 Jan 2015

@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?

gaearon on 2 Jan 2015

👍1

Yes. Makes sense and I got it in and working.

I'm just trying to wrap my head around when I should be fetching data. It seems like in the route when there's a param is a good place in general.

VinSpee on 2 Jan 2015

Sorry guys, I figured this out. Forgot to close issue.

drewhamlett on 2 Jan 2015