How To Redirect In React - React Router Tutorial | Redirecting, useHistory...

[Music] hey guys how's it going i'm back here with another video and today i decided to bring actually this quick video which i'm gonna go over a very um requested um topic which is basically how do we redirect using react and react router dom and i was a bit surprised with the share amount of people who asked me this question because i i feel like it would be something that you just search on google and find it on stack overflow really quickly right but the thing is that i realized that there are many different conflicting answers which makes it very confusing and when i learned it i i also was confused and that's why i decided to make this video because i wanted to go over the two different ways you can redirect in react router dom because there's actually two different ways of doing it and in my opinion you should use those two ways um depending on the occasion so i'm gonna go over two different ways in which you can redirect and react route or dom and before we get into the video if you guys could leave a like that would massively help the channel grow um i'm putting a lot of work into this channel so i would really appreciate if you guys could help me grow the algorithm will definitely push my video to more people if you guys start liking and subscribing if you guys are not subscribed so i just wanted to make that request if you guys could do that i would really appreciate it so now let's get into the tutorial okay so you can see right here i have this um react application i'm gonna zoom in a bit so you guys can see it better but you can see it's very simple right i just have a very simple react application you can ignore most of the stuff the only thing you should know is that we are using react router dom here at the top as you can see um and i'm just going to delete like this which i'm not going to use i'm going to save this and you can see that i actually have um two different um routes right i have the login route and the profile route and both of them are different components there are inside of a folder called pages as you can see and both of them are pretty simple all right the login just has two inputs for username and password and a button to log in when you click on it and on the profile it just says if you're here you're allowed to be here which means that someone who shouldn't be in a profile page like if someone didn't log in they shouldn't be able to access a profile page right and you can see that this is our application if i go to the currently if i go to the login page you can see there's the two buttons in the no the two inputs and the button and if i go to the um profile page um you'll see that there's no problems whatsoever because um we can get into it but we haven't logged in and that's a problem so the two different occasions which i think are actually important to um kind of just differentiate the ways in which you should redirect is basically one of them is when you like do some action so like when you click on a button or you i don't know you do something in a page you you create you're making api requests that kind of stuff right um and the other one is basically when you try to reach a page which you shouldn't and then you should redirect so there's two different ways of doing this right and in this case we're going to use the first way for the login so when we click on the button it should redirect us to in this case to the profile page but if someone tries to reach the profile page then without being logged in then we're going to use the diff the other um redirect method to redirect them back to the login page so that's the idea right that's the flow of our project and to do that obviously i'm using react router dom as you can see right here if you if you're not familiar with react or dom i have a full tutorial on this i'm going to put a card up here and leave a link in the description if you want to check it out i go over every single thing you should know about react router dom but the thing is um let's start implementing actually the first way which is um how in the login route like how do we actually click on this button and redirect ourselves to the profile page so to do that it's actually pretty simple there is something in the react with our dom library which is a hook called use history and i'm going to import it from rector dom over here and i'm just going to import the hook here use history and this hook is basically it's very simple all you have to do is basically it will hold information about the previous page you were in and if you push if you call a method from this hook it will basically redirect you and change your location to the net to the page that you want to go right so to do that you actually just need to come over here and say const um actually i'm going to use light i'm just going to say something like let and i'm going to call history equal to use history like this pretty simple and then whenever you want to change routes or redirect to another page all you have to do is say history dot push and over here you pass whatever route you want to redirect to so in our case profile so literally this is all you have to do and whenever you want to change again you just do history.push and the route so it's pretty simple but the thing is um we don't want to actually push over here we want to push it based on if someone clicked on the login button and obviously we're not carrying right now about like if the username and password are correct this is just right like demonstration purposes but i'm going to delete this i'm going to come here to the button and i'm just going to say on click and i'm going to pass here the the button and i'm gonna say something like um history dot push and i'm gonna push to the profile page like this and now what should happen is i'm just gonna delete this over here what should happen is basically when we come here to our page and i go to the login over here imagine when i log in i do something like my username is um pedrotec my password is um 123. when i click on login it should redirect me to the profile page and as you can see this is exactly what happens so this is the first method which is basically you push a new route to the history api and basically it will allow you to redirect based on actions however the second method is a bit more confusing in my in my opinion right which is basically how do we redirect um like if you're trying to log into a page and you're not authorized right so let's imagine that we have this variable called authorized and probably it's going to be like a global a context state something that you can access everywhere in your application but i'm not going to show how to create global variables i have videos on this if you want to check it out um let's just imagine that this is the case right and so instead of our profile page um right now we're just going to have this variable called authorize and i'm going to come over here and call it authorize like this and basically what happens is i'm just taking it as props but like the profile component should only be rendered if authorized is true right and if authorized isn't true then you want to redirect so let's actually pass this value like a true or false value for authorized um when we call this component so to do that we have to come over here to the routes to the where we're calling the routes and we want to pass it as a as a prop to the profile but since like when you call a component you can't actually pass props like this we actually have to change this to this like this and just pass like profile like this and now we can pass props so we have to pass a prop called authorized and it should be a true or false value to represent if you want to be able if like we're actually authorized or not right and this is just an example if you obviously as i mentioned before you should have a state that actually like um authenticates a user authorizes a user whatever you want so let's just come over here and for now let's just say false actually let's just say false um so what happens is the user is not authorized so what do we do to redirect this user well there's another component in react order dom which is pretty self-explanatory the name is redirect so you can actually import something called redirect over here and this component will literally do what the name itself what the name says right it will redirect you to whatever route you want to so inside of here what you can do is you can check conditionally if um the user is not authorized and if the user is not authorized then you instead of returning this like the html the jsx for the page you just return the component um redirect and you put the link to where you want to redirect so in redirect you actually need to pass um a two prop like this and this too is just a string which contains the route so i'm going to redirect to login now the flow of this is it will get this variable which is right now a prop um it will check its value if it is not true then it's going to return the redirect to login instead of returning this and it will just ignore the rest of the page right so let's see if this is working right now um authorized is equal to false so it should actually be working let's come over here and let's go to the um to the profile like this and you should see that it doesn't changes it turned it like it it puts it back back into the login we literally can't go to the to the profile page even if i click the login button it will it will keep me on the same page because authorized this falls and every time we go to the the profile page it automatically redirects us back to the login page so let's change this back to true and let's see what happens when we try to go to the profile page you'll see that now um we'll be able to go to the profile page so this is like basically it and these are the two methods you're able to um to use to make it so that you you can redirect in your application i know it looks simple however it is very confusing um especially for beginners because um the documentation for react router dom in my honest opinion isn't the best right now and i think that um making this distinction between both um redirecting based on an action and redirecting based on like some sort of authentication or authorization is really important so if you enjoyed this video please leave a like down below and comment what you want to see next this was a really quick video which is something i usually don't do but i just really wanted to make this for those who have doubts right now so yeah that's basically it i really hope you guys enjoyed it subscribe if you're not subscribed and i see you guys next time [Music]

Channel: PedroTech

Views: 33,352

Rating: 4.946888 out of 5

Keywords: crud, css, javascript, learn reactjs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, redirect, react router dom, react-router-dom redirect, react-router-dom hooks, how to redirect in react, how to redirect in react router, usehistory hook, usehistory react hooks, react router tutorial, react router

Id: tiAlSpyWIDs

Length: 10min 23sec (623 seconds)

Published: Sat Mar 27 2021