React Router in Depth #11 – Navigate Component

Hey all, in this React Router tutorial you’ll learn how to use the Navigate component to redirect users to other pages.

⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:

🐱‍💻 Access the course files on GitHub:

🐱‍💻 React Tutorial:
On Net Ninja Pro –
On YouTube –

🐱‍💻 React Router Docs –
🐱‍💻 VS Code –

Okay then so another thing I want to Show you is how to use the navigate Component to redirect users based on Certain conditions for example if you Wanted to redirect someone not logged in You could do a quick authentication Check using some kind of global state or Other and if that was null meaning the User is not logged in then you could Return a navigate component to redirect To use it away from any given page so It's pretty useful for protecting Front-end Pages this way although I have To say that if you want to protect any Data from unauthenticated users then That needs to primarily be locked down On the server side redirecting users on The front end is just adding a bit of Dusting sugar to the cake for a better User experience but any data Access Control needs to be done primarily on The back end but anyway let's try using This navigate component inside the about Page so we're not really going to do any Kind of authentication check right here Because we've not got an authentication System but what I am going to do is just Kind of simulate that by making some Local state inside this component and We'll call it user and we have a Function to set the user as well and Let's use some states so use States and We'll set an initial value to be Mario Which is just like a username right now

What we're going to do is have a button Down in the template which updates that State to be North so essentially like Logs them out so we'll have a button and We will say a log out inside that we Need to add a click Handler so unclick is equal to a Function Which is going to fire and that will set The user using that function up here and It's going to set the value to null so Basically by clicking this button we're Simulating a user logging out we have a Value for the user to begin with but Then when we click this we no longer Have a value for the user right now say At that moment when the user logs out we Want to redirect the user well we can Just do a new check right here and say If not user then we want to do something And all I want to do is return something Right here so if we return something Right here then we're not going to Return this template instead we return Wherever we output here and I want to Return a navigate component which is Built into react router Dom so it Imports it up there and we can just say Where we want to navigate to so that's Going to be to forward slash like so all Right then so this is going to navigate The user to the home page when we don't Have a value for user so to begin with When the first page uh sorry when the

Page first loads we have a value and so We don't return this when we click on The button and we set that to null we Don't have a value so we return this so Let's give this a whirl before we do That though quite clearly we need to Import use state so let's do that import Use States and that comes from react All right so now let's try this All right so if we head to the about Component we can see this page so we Have a value for the user but when we Log out we're going to return that Redirect or rather navigate component And we redirect them back to the home Page now if we go back on this thing Right here Then we should go back to the about page And that's because it's preserving this In the history okay now if we log out Again it's going to redirect us and if We go back again then we go back to the About us page so this is preserving this Page in the history right here but if You want to replace this page in the History you can do that so the way we do This is really really simple we just Need to set replace equal to True dead Simple and now that's going to replace This with this page the about page in The history so if we try going back then You won't get to the about page okay so What I'm actually going to do is go to The help page first of all right and

Then the about page and then I'm going To log out Now that navigates us back to the home Page and if I click on the back button We go back to the help page not the About one and that's because the home Page replaced the about page in the History so we can't go back to that About page now so that's the navigate Component really useful when you just Want to navigate the user to different Pages depending on certain conditions This was just one example using some Kind of authentication check and that my Friends is the end of the series so I Really hope you've enjoyed this series And you've learned something along the Way and hopefully you're going to be in A good place now to start using the React router and all the different Features it offers in your own projects Some of my friends I really really hope You enjoyed this series and you learned Something along the way if you did Please please please don't forget to Share subscribe and like that really Means a lot and if you want to access All of my YouTube courses without Adverts also get access to premium Courses and Early Access courses as well You can do at you can sign Up for netninja pro which is just nine Dollars a month and also half price for The first month with this promo code

Right here and for that like I said you Get access to every course without Adverts without YouTube adverts you also Get access to exclusive courses not Found anywhere else you get access to my Premium courses on udemy and also Early Access to all of my YouTube courses as Well so the link to this page to sign up Is going to be down below again I really Hope you enjoyed this series and I'm Gonna see you in the very next one Foreign [Music]

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *