I was in a middle of a project, and I didn't used React for a while. I had to solve the situation: I had got a component, which was embeded deeply in a Route component (this Route was under a Browser Router component). I needed to use history object from the Router history. I started to remember my bad adventures with old React Router and circumstantial history manipulation.
So, I was in a bad mood, when I opened the official documentation. It was a big surprise when I could solve my task in 3 minutes.
There is a magical higher-order component, that name is withRouter. It takes place in the react-router-dom package also. With its help, you can pass the whole history object to your component as properties. They contains several useful data about routing.
import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';
class PassToMeMyRouterHistory extends PureComponent {
redirectToHome = () => {
const { history } = this.props;
if(history) history.push('/home');
}
render() {
const { history } = this.props;
return(
(history)
?
<div onClick={this.redirectToHome}>You can go to Home 🥳</div>
:
<div>Oh, we did not get pathname! 🤔</div>
);
}
}
export default withRouter(PassToMeMyRouterHistory);
```
As you can see above, after we let the *withRouter* component to do its job, we can easily reach the necessary data and functions in connection with history. The history object has several property, you can check it in the [documentation](https://reacttraining.com/react-router/web/api/history).
Ps.: You need to handle the re-render logic in your component when you need this action, in case of location change. *withRouter* gives you the props but doesn't subscribe for the changes!
Top comments (16)
this was such a life saver! Do you mind explaining why
this.props.history.push("/home")
might result in undefined but this would work?I think it has something to do with this line--With its help, you can pass the whole history object to your component as properties.-- but am not 100% sure.
Fantastic! This finally makes some sense to me. I spent hours trying to help someone that using we children under it vs component= and I couldn't figure out why this.props.history.push() wasn't available!!! I only/ever use component= so never saw this other approach (embedded children) and didn't suspect it.
So, in your app, if at some point you want to re-direct the user (in javascript, not a tag) to a new location, what's the best way? I do not think it is window.location= because that's a page reset, right? And if you can't get to the router history, WHAT do you do??
I know you said this a few months ago, but in case you were still wondering haha.. the history object actually exists on the window object itself in plain old vanilla JS.
Thanks a lot Krisztian for this!
This was really helpful. Thanks
You saved my asss. thanks a lot :)
Thank you! You saved me from losing my mind over router redirect :) 👍
Thanks! This helped me with a problem! Appreciate it!
It is a pity that I just found this post. This would have saved for me a day of struggle and search for solutions for my react project.😄
Next time you can solve the problem in minutes!😃👍
Valeu Mano
Muito obrigado!
I was looking for this for a long time. Lots and lots of worakarounds and the solution was that simple. Thank you for this!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.