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!
Oldest comments (16)
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!😃👍
Thank you! You saved me from losing my mind over router redirect :) 👍
This was really helpful. Thanks
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.
Thanks a lot Krisztian for this!
With this one,
i was able to fix an issue caused by referencing the component in routes using "render" not "component" prop.
Thanks a lot!
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.
You saved my asss. thanks a lot :)
Valeu Mano
Muito obrigado!
Thanks! This helped me with a problem! Appreciate it!
I was looking for this for a long time. Lots and lots of worakarounds and the solution was that simple. Thank you for this!
Thank you for this article, I'm not sure I understand this solution but I knew the reason it was undefined but not how to solve it.
Just one word 'Amazing' !
Some comments may only be visible to logged-in visitors. Sign in to view all comments.