DEV Community

loading...
Cover image for React Router - How to pass History object to a component

React Router - How to pass History object to a component

kozakrisz profile image Krisztian Kecskes ・2 min read

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);

Enter fullscreen mode Exit fullscreen mode

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.

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!

Discussion (15)

pic
Editor guide
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
miloslavcv profile image
Miloslav Cvetkovic

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

Collapse
sstefan0v profile image
Stefan Stefanov

You saved my asss. thanks a lot :)

Collapse
sanamsoodan profile image
Sanamdeep Singh

This was really helpful. Thanks

Collapse
vishwanath profile image
Vishwanath

Thanks a lot Krisztian for this!

Collapse
cvclaravista profile image
CvClaraVista • Edited

Valeu Mano
Muito obrigado!

Collapse
josuerodriguez98 profile image
Josué Rodríguez

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

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!

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 Author

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

Collapse
gurutobe profile image
Abdelrhman Yousry

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!

Collapse
tifelaflame profile image
TifeLaflame

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.

Collapse
makaweys profile image
Uweys Makaweys

As a react newbie ... Saved My ass Bruh, so frustrated man but Thanks to you.