Trying to update to react-router 4, can't find a straight answer of what to do with browserHistory.push() now. How to programmatically do that?

My app with RR v3 has browserHistory.push() all over the app… lots of places where I need to programmatically shoot a user here or there. For some reason I can’t seem to find a straight answer on how to do this with react-router v4 which is a huge let down… so far I’ve seen three things mentioned none of witch are as simple as “import browserHistory” and “fire function”…

<Redirct /> component (not 100% sure the point of it being a component)

withRouter() HOC (seems like this isn’t that helpful if you’re doing something outside of a component, like in a beforeHook or in redux somewhere

and the a separate package called history

How can I do a web development 101 URL redirect without spending two hours reading github issues or docs. Please save me.

I feel you bro… same thing happened to me… Can’t seem to fully understand the concept behind RR4 so I switch back to FR since it still works for my needs

RR3 was good. I’ve updated one project to RR4 but am not going to update the other projects. There’s no upside. Maybe if you’re airbnb and have a bazillion line code base and 100+ developers working on it, then RR4 makes sense (even then, I’m not sure what the upside is). But There was no upside for me, only time down the drain.

I’m not entirely sure where your confusion comes from. <Redirect /> exists as a declarative form of redirection. RR 4’s entire mantra is “just components” (though it’s not 100% so). And withRouter() gives you access to props.history to do navigation imperatively if you so desire.

Either:


function someComponent(props) {
  if (props.shouldRedirect) {
    return <Redirect to="where-to-go" />;  
  }
  ... regular code
}

or use withRouter to wrap your component, pull in this.props.history, and imperatively push() to the location you want.

1 Like

where should this function be called? because this where I’m confused as well

@a.com if you haven’t figured this out yet, we have a tutorial that covers this concept directly: https://themeteorchef.com/tutorials/getting-started-with-react-router-v4#tmc-performing-redirects-programmatically

So I guess anywhere you are calling return browserHistory.push() you could hypothetically just substitute return <Redirect to="where-to-go" />?

At this point I’ve just been using the withRouter HOC and this.props.history. But there is also mention of the history package, which seems like you could use to just import history similar to how you imported browserHistory.

I guess the confusion is having Redirect, withRouter and a separate history package. It’s not immediately clear why you’d use one over the other, whereas in v3 it was just link and browserHistory (no need to spend 20 minutes trying to decipher the 3 other options to do the same thing). And the Redirect component is somewhat strange, it’s like they made it a component for the sake of making it a component. I wonder if there was some technical reasoning behind it not just being a function called redirect.

I had the same confusion with apollo where there’s 3-4 different ways to go about updating the store and it’s not 100% clear (at least in the first 10 minutes of looking into it) which of the options is the go to.

Thanks! I saw this awhile ago but only recently made the switch to V4. Wish I had remembered on saturday.