DEV Community

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

React Router - How to pass History object to a component

Krisztian Kecskes on December 14, 2018

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

Collapse
 
shubham2924 profile image
shubham2924

Just one word 'Amazing' !

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.