Complete React Tutorial (& Redux) #27 - Programmatic Redirects

Key Takeaways

all right then gang so we have our navbar set up and we've set up our router so that it's all working if we click on one of these links it loads in the correct component now I'd like to show you in this video how to program Attica lis redirect a user to another URL for example if they click on a button or if they'll land on a page and you want to redirect them I'm gonna show you how we can do that so first of all let's go to our contact component right here so at the minute is just a simple deal with an h4 and a PTAC now I want to show you something which is pretty cool if we take in the props right here we have automatically added to the props or router information and that's because this is one of the components that the router loads up so for any component that the router does load ups or any of these things right here the router attaches some extra information to the props object so I'll show you that right now so if we log this props object to the console and we can do that because remember this is just a JavaScript function right here then we're going to see that extra information about the router on the props object so console dot log and then props okay so save that and let's view this in a browser and check out the console over here so if we go to the contact page now where we did that console log we see right here we have this object now these are the props and we see we have the extra information already added to the props we've not added these the routers done that automatically so we have the history right here we have all of these different methods and properties we have the location so it says right here the current path name it says we're on the contact page which is where we are and we have this one right here which is going to be used for route parameters later on and I'll show you those in a later video for now we want to redirect the user to a different page for example if they land on this one after two seconds so the land here they wait two seconds then we're redirected somewhere maybe to the about page or something so to do that what we need to do is use this history object on the props object so if you look down here we have this push thing right here so the history in itself keeps track of our history and if we push a route to that history then it's going to add another location to the history and essentially pushes to that location so I'm going to show you how we can do this down here instead of logging this to the console I'm going to set a timeout so set timeout this is gonna wait for about two seconds and after two seconds it's gonna fire this function whereby we say props dots history dot push remember it was on that history object then the push method right there so right here it says we can take an argument which is the path so the path is gonna be forward slash about and it's gonna wait two seconds to do that which is 2,000 milliseconds right there so let's save this and see if it works we're saying after two seconds we want to add this to the history want to push it to the history which is therefore going to take us to this page so if we now go to the contact page wait two seconds then voila we get the about page so that is a programmatic redirect we just say props dot history got push and then where we want to go to all right now let's comment this out because I want to try this in a different component I want to try it right here in the nav bar let's see if it works here so I'll say set timeout again and it's going to do exactly the same thing function inside which is gonna say props dot history doc push and we're going to push it to the about page so it doesn't matter what page will land on this time it could be the home page it could be the contact page because the nav bar is present in every single one of them so on every single one of them it's short after two seconds redirect to the about page and we need to take in the props here so let's save that and see if it works so let's go home and you can see we get an error and it says cannot read property push of undefined so apparently prop start history is on find now why is that well let's log the props to the console first of all say console.log and then the props save that and view this in a browser and the prop sees an empty object why is that because previously we had all of those nested properties on the props added by the reactor router so why are they not here now well I said that the react router automatically applies those properties to the props on any of these routes right here okay so anything that we add into this thing right here the browser route as a route then it's going to add those properties to the props in these components now the navbar is not in or out so it doesn't receive those props by default but we can add them in and we can add them in using a higher-order component now a higher-order component is something that basically wraps another component and gives you extra powers so in this case we're going to apply those properties to this thing right here so let's do this we have to import this higher-order component right here and it's called with router and it's from react router dom and then if you go to the bottom where we export this is where we apply higher-order components so I can say with router and it's a function and we pass as a parameter into that function the component so it's wrapping the component this function is higher-order component it's applying these properties to the props to do with the router then it's returning the component that super-charged component right there okay so that's all it's doing it's supercharging a component so now let's save this and see what the props look like in the browser and now you see we have those things history it location a match so this thing right here is higher-order component has supercharged this component navbar and apply those properties to the props all right so now if we get rid of this and instead use this then it should work save it refresh and it redirects to the about page after two seconds awesome so there we go my friend that is how we redirect to a page using historic posh then the URL and that's how we use higher-order component in this case with router to supercharge components and we're going to talk a little bit more about higher-order components in the next video