How to implement Routes in React JS | React Router DOM v6 | Public vs Private Routes

hello guys welcome back in this video we will learn how to declare different routes in a react application and how to make a route private and how to declare page not font so let's get started i have created react.js project that is showing a welcome message from the app component in app.js file so to use routing in ref.js project we will be using react router dom npm package and to install that this is the command i have already installed this package in the project so let's go ahead and start import different components from that so it will be import from director dom and to use uh the url or the route in ref.js application we need to encapsulate all of our components inside browser route so it will be browser router import it and then we need to add everything uh inside that so right now we have only the welcome message let's add inside that after this there's nothing change everything will be as it is was before so to add different roads like we can add maybe the login route or we can say the sign up route right so things like that if we want to navigate to different pages if we hit different routes so for that first we need to declare the routes and let's import the routes and also the route so in the roads we will be declaring uh different routes uh that we need to include in our application so suppose first is so each route has a path prop and we can say that for it will be it is a road for the login page and the element we need to show or the component we need to render uh when this path is hit will be we can say the login we will declare or create this component soon so let's copy this one and create multiple rows so we can say that sign up maybe sign up component and then maybe we can say about and maybe the about component let's declare the these components so function login and for now let's return maybe the button which says login and that's it let's copy this and create components for the sign up and the home also the not home about and we can say sign up and about okay save it here you go if you are on a sign up it is showing sign up and if it is login showing login and about showing about so if we add something else was we say log out it is showing nothing only this welcome is shown but if we want to see that this page does not exist on page not found we can add a route in the last we can say a route with the path of static so every path will fulfill this condition and the element we want to show against that is page not found okay and route let's remove this one okay and create the page not found so function page not found let's return a p saying page not found save it here you go on the logo be not phone and if it is login the login and if it's supposedly one one pay not phone right and if suppose everyone is this is a generic message that page not found if you want to see what the user has entered here we can get that as well so in that case you can see static and then declare a variable we can say page name maybe right right now it will behave the same login11 and maybe logout right and login works okay so here we can get the the params that user has entered so it will be crossed patterns and use patterns let's import use parents from the reactor to dom okay so here we can say suppose the params dot the name we have entered here page name we can maybe put it in the course we can say page in our font so we can say logo see logo page not found maybe again login it's working right so if if ah the road exist it will render that component otherwise it will go here and then to the page not found component and the page not found we are getting the params whatever user has entered and then we are displaying that that page does not that page is not found all right so this is how we enter ah different urls here but let's we can add maybe the navigation bar or the menu button so that we can navigate from there as well so let's declare a component maybe call neighbor and here we can enter that so never return let's add the fragment and in that we can return different links link is edited and that will be linked to so we need to provide the link on which we want to uh navigate when user click on this link so it will be login and the text will be okay right if you save it here you go the login has shown and let's copy and maybe paste it for other links sign up and about and then maybe we can say logout and that will be about and sign up and let's uh make it a little pretty so let's add a style quickly so it's display will be flex and flex direction to be row and maybe halfway the height of 80 pixels and with the margin of maybe 16 pixel and with the background color of maybe i think fine here you go and justify content to be center and align items to be centered maybe we can say space around instead of centering here we go never so login sign up goes to sign up about goes to about and logout we say pay not font so let's go ahead and create a first grader route so it will be logout and the component name will be logout let's go ahead and copy any of these and add the logo so it will be logout right save it logout so login page sign up about log out and if we enter something else it will say the page not found right but what if if i do not enter anything oh it's only showing [Music] the menu that we have declared here the neighbor but no routes because nothing is matched so it will uh will not render any of the page so suppose if we want to render any page whenever there is on even on a slash we can render that as well so it will be something like we can say route with the path of slash and the element will be maybe we can say uh the login okay there you go so if you are on login page it is same sign up and nothing it is again on the login page because we have to hear that on path of slash we will be rendering the login page right so instead of the login [Music] let's create a maybe the home component and there we will decide that if user has logged in already then we will be going to maybe the about page and if user has not logged in then we will be going to the login page so you can see home and let's declare the home let's say function um maybe we can say is logged in the parameter we will be passing so return [Music] okay let's and in the fragment let's check if is loading then the about page otherwise the login page right save it the login page and if suppose this login is equal to true it is about page right so we will passing is logged in from the top so let us declare a state here and is logged in with initial value of false let's import from react use state okay so the default value is false okay so in home we can pass is load and to be is logged in right we're passing from here and by default this way as a login page and if it is true it should show the board page right and let's go ahead and add few the action actions on the login page and signup page there so that when user click on that we set the is logged into true so that user is moved to the uh abort page or the after it is logged in instead even the user is on this page it will be on the go to the board page right okay so uh for each of these again we can maybe pass that on login update a function and on click we can call this login update and we can pass it true or false based on the fact that whether user is logged in or logged out right so copy this one and paste for the sign up as well and also for the logo but will you pass here the false so instead of logged in user has load off and let's copy [Music] this prop as well in the sign up and in the logo okay so login it's not a function we have not passed here so it will be on login update on login so it will be set is logged in so it will be setting this state to true or false copy it and paste it for the sign up and paste it for the logo as well okay so here you see login login sign up about right so after user is logged in [Music] we need to navigate the user to the let's navigate to the home page so that if after the user is logged in uh it will be showing uh accordingly the about or the login page so for that we can [Music] take advantage of the navy gate from the use navigate hook so import it from the reactor to dom use navigate and after we have logged in we will set that navigate to the home page so the the navigate to this route and we have declared that whenever user is on this route we will be showing the home right and on to the home we are passing is logged in uh state and on we are checking is if it is logged in it will show the about and otherwise if you log in so what will happen is as as soon as i click on the login button it will set the login to true and then we navigate to the home and it should immediately from the login page it should immediately to move to the about page right so let's copy this one this one in the sign up and also on the logo so once you user was on the local page so as soon as uh user person on the log got it should navigate to the login page accordingly copy [Music] paste it here and paste it here as well save it and also uh for this one we need to pass on login update and for that we need to pass it first here and then to the home and then in the home we can pass this to here now login update and is logged in is we don't need is logged into it so let's skip that save it there you go login page as soon as i click on the login move to the boat again move to the board right and if i on the logout click on it move to the login page sign up on home because i'm not logged in it is showing the login as soon as login i'm still on the homepage and but it is so that it is saying that you are logged in now right so this is how we declare uh different type of routes uh we can navigate from changing in the url bar or we can change from declaring different links or even we can navigate using programmatically using the use navigator or the navigate to a route all right so let's go ahead and see how we can declare ah maybe we can say right now you even i am not logged in and if i go to maybe the boat it is still going so suppose we want to say that about is a protected or maybe we can say the private road so that users should only be able to go to the board page after uh user is logged in so then maybe let's comment here we can say that these are the roads before login and you can see these are the roads after login so the logout and then the above page right and you can go to the home page anytime so we can see that these two the home page or the any page not found user can go to these pages anytime so we can say roads for everyone right this road is only accessible after user has logged in for what we wanted to do is uh that we should not add these routes to the routes so how we can do this we can say that is if user is logged in and and then in a fragment we will declare uh the roads right so so these two routes will only be declared or will only be available if user is logged in otherwise it will say that this page does not formed save it here is you see i'm on the board i'm not logged in and it is same about not phoned sign up and login working fine logo page not phone and go to the home page working fine and if i say something else it says pay not phone right and similarly we can uh for this we can say that if user has not logged in then user can go to these pages otherwise if user is already logged in user i mean if you want to say that user cannot should not go to the login page we can say if for this one you can say if user is not logged in and then in the fragment we can declare this so this is how we declare the we can say the protected or the private routes right and also if needed uh with for for about maybe same boat page not phone we want to say that this page is protected you need to log in to go to this this one so this type of things we can do in the page not found here you go so far here we want to say that let message is equal to maybe empty and maybe let's make the message to be this one by default if you want to say and tolerance are in this page not found okay and we can say if the patterns is equal to you can see about so because we have declared in such a way that uh it is slash and then the page name so it will be only the about text without the slash right in the in the page name param so it will be if the params chart page name is about then we can say update the message to be maybe you need to be logged in to access this page right and here we can only show the message right here you go about you need to be logged in to access this page and if you are on either any other page you can say that that page is not found right and about you need to be logged in to access this page sign up and login will work right so this is how we declare uh the different routes we declare how to make our pro protected or the private and how to make a page not found and also we see how we can show a particular message based on the uh the route all right so that's it on exploring the roads if you have any question please let me know in the comments below and if you learned something in the video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 3,337

Keywords: reactjs, react router, codewithaamir, react public routes, public vs private routes, react router dom, react-router-dom, react router dom v6, react router link, useparams, browserrouter, page not found, wild card route, react router example, react router v6, react get url params, react router 6, react router default route, react router 404, useparams react router, react router route, react router dom useparams, web development using reactjs routes, implement react router dom, react

Id: Qls47-8zOg0

Length: 26min 56sec (1616 seconds)

Published: Fri Nov 05 2021