DEV Community

Cover image for React Router - How to pass History object to a component
Krisztian Kecskes
Krisztian Kecskes

Posted on

React Router - How to pass History object to a component

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!
Enter fullscreen mode Exit fullscreen mode

Top comments (16)

Collapse
 
jasterix profile image
Jasterix

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.

Collapse
 
stakutis profile image
stakutis

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

Collapse
 
nateosterfeld profile image
Nate Osterfeld

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.

Collapse
 
vishwanath profile image
Vishwanath

Thanks a lot Krisztian for this!

Collapse
 
sanamsoodan profile image
Sanamdeep Singh

This was really helpful. Thanks

Collapse
 
sstefan0v profile image
Stefan Stefanov

You saved my asss. thanks a lot :)

Collapse
 
miloslavcv profile image
Miloslav Cvetkovic

Thank you! You saved me from losing my mind over router redirect :) 👍

Collapse
 
josuerodriguez98 profile image
Josué Rodríguez (He/Him)

Thanks! This helped me with a problem! Appreciate it!

Collapse
 
jkozma81 profile image
Kozma János

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.😄

Collapse
 
kozakrisz profile image
Krisztian Kecskes

Next time you can solve the problem in minutes!😃👍

Collapse
 
cvclaravista profile image
CvClaraVista • Edited

Valeu Mano
Muito obrigado!

Collapse
 
brunnovianna profile image
Brunno Vianna

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.