(#12) React Router Setup | Learn React Router DOM | How to use React Navigation

Hello friends how are you I am n and in this session I will show you how to use the router in reactj application how we can use the navigation between different pages so all these kind of things we will cover in this video okay so in the in normal traditional applications we are using like in this way to navigate between different pages we are giving here HF okay and then the URL like in this way if I want to go to the home if I want to contact us in the we are using a little different approach okay so first of all you we have to Define all our roads and uh the website basic structure and then we will uh see how we can redirect between different pages okay so first of all let's let's me go to the app. case and I have to clear uh all this content okay control s let me go to the site and here we have nothing now I will Define here a header and in this area there will be any page content and at the footer you know that we will Define a footer okay now for this uh I have to first uh Define the roads and then I will show you how we can handle these okay now let's me move to the index do case and here I have to enclose the app do Cas inside the browser Road okay so let's me just copy the uh reactor stck mode and here I have to copy this one okay past here uh form my document now I have enclosed the app component just inside the browser Ro let's me import this uh contr s it's not working browser order is not defined let's me copy this and go to the Google okay I think we have to uh I mean browser router from react r okay import this and go to the page uh control s let me show you again still not working okay now we have basically to install direct RoR D install re RoR room copy go to your uh project and here click on new terminal and I have to install this package inside my project press enter it will take a little time in installing the package so basically react router Doom is when of the necessary package for maintaining the navigation in your site okay now the package is installed successfully let's me save again and go to the page uh browser route is not defined let me again see here browser router I will uh remove this one okay contr S no it's working okay now here inside the app do KS go to definition here I have to Define my roads okay like in this way sorry remove this one and uh I want that uh the header should be static and the footer should be static in my website so the header and footer will be showed on all pages I am just defining a layout of of my application so let's me use the header component okay and here I will use the footer and here I want to Define uh I want that uh the the page content let's suppose I have login page then the login page content will be printed if I have a contactus page then at the top there will be header and there will be a footer and in this place my contactor page content will be rendered so for this I have to add two rods the login home and contact us so let me copy this code you have to Define your roting like in this we format the document so you have uh inside the ru routes tag you have to add all your uh routes so let me also add the routes for the contact us contact us it will be the URL and my component name will be contact us okay now I did not edit the login the contact us and home component I will add this component now now let's me basically these are the page okay so let me add here a folder new folder pages okay and inside the pages lets me add three components home login and contact us new file home. jsx react function component press tab okay and now I will run another component with the name login. jsx uh okay and react function component press tab now here I will also add one another file I mean page or you can say component with the name contact us. jsx okay T function component okay no close this one this one and uh also these one okay now I at the JS component I have to import the home uh the is not working let's me save all import home it's not working anyway it's not a big issue yes let's I let me import this manually I import home from pages okay home and I have also import the contacts and login login and contact us from the contactors component control s p to outside of SRC folder I think I am doing a mistake Pages SRC now it is inside the contact us app. jss let me try in this way import Bo okay a correct way contr KC let me command for the time and I want to get the correct path sorry guys sorry it's not the inell is not showing for the time so let's me save all save go to the page RS not defined okay so I have to import routes from reactor to and I also to import this one okay contrl s home home login is not defined no I have just to sometime when you are adding new file to your project then it's not working now let's me uh close this one close also this and let's me restart the application new terminal so to start your application you have to type npm start okay it's showing me that something is already running on Port 300 okay it's a good thing so my project is already running on Port 300 I have just to type here 300 4 3,000 okay home login and contact us because I have commented this uh so let's me again try to import home it's not working if I just remove this one control s which fall outside the project SRC directory let you import outside of this not supported it's basically inside the SRC folder but it's showing me that it is outside of the SRC I don't know why this give me error let's me rename the [Music] folder s pages okay rename again contrl C right Pages if I just type like in this way okay I think it will not work let me remove this one remove this one slide pages okay control Z and like in this way contr s okay so application is working correctly let's me me move to the header first go to definition I will remove all this thing from the header contr s okay it is our basic application now let me add here some content to our header uh I will show you again that I have defined my all roads here if you have some other Pages like product like product retail then you have to Define all your roads like in this way uh go to the index here you have just to use browser route and enclose the app component inside the browser router uh component and here go to the then go to the app.js so if you want to keep something static that show on every page then you have to Define it is outside of the roads like I want to show header in all my pages that is why I keep it outside of the roads and I want to also show footer on each page that is why I keep it outside of the RS and here my content will be replaced dynamically according to the rout now let me first add some HTML to the to the header okay so class name class name will be header and here lets me add some like uh link okay so in normal we h we are using anchor te for the link but in re JS we will use uh link think okay I will import from the re doom and here I will have to give home text to the link Let Me Go a URL so the URL will be this one okay in in in the anchor T we using hre but in react we have to use Link and then we have to use two keyword okay for sry formate the document now I will use basically Three Links in the header the second one will be for the login and the third one will be the or contact us okay it URL will be login we we Define the URL here you can see and for the contactors I have to give the URL here okay now let me save these things are looking like in this way now I have to get some CSS go to the f. CSS contr uh control a remove all now I have to just give some um styling to the header like display Flex justify content space between the time don't confuse yourself with the CSS I'm just trying to make it a little uh in alignment center okay control S no it is uh in line home login contact us okay uh and I have [Music] to uh give here a height height should be 50 pixel of the header and it's uh WID should be 100% IT background color should be a little black okay I think it will be okay this one so it will be the color yes let's me click on this one go to the header and just uh display Flex okay let me give here the display in the correct way flex and here you can see home login and contact us but it is a little far away from so justify content Center uh I think it should be Center and here should be a c one ram okay so it is basically a navigation menu uh now inside the header we have the uh anchor tag I go to the angle here let me give a class name to all these uh na item okay copy this one p here and paste here and lets me just copy the class name go to the app. CSS sorry this one and let me give some CSS to this uh I have just to apply some CSS color white okay font size should be 13 RAM and it's uh font weight should be 600 let's me also add here some text to correction n the underline or should not be shown none okay control s it's again uh sorry align item Center okay control save all now it's looking fine okay it is basically our navigation menu and here is our footer let me also move the footer to the bottom uh here we have the ab yes and it is our header footer let's me give here add you uh class name sorry class name should be container and let me also close this one okay form document uh I'm doing a mistake let me correct here again sorry control Z I think I am doing a mistake okay like in this way container okay now let me give some style to The Container also so the site is looking a little beautiful container and I have to copy this control V control s go to the page uh okay say okay let's me set here the flex Direction Flex Direction to column okay now go to The Container again uh justify content Center start space between okay for the time I think it is okay okay so it is our home and it is our footer I will keep the footer to the bottom but I think it is not very necessary at the time now let me click on the home I am at the home if I click on login I am at the login page you can see if I click on contact us I am redirecting successfully to the contact us so this was uh the basic thing that how we can uh I mean handle the navigation in react case so uh we have to define the routing and then we have to give link so let's suppose it is our header you can also see the URL is changing if I click on home I am at the homepage and uh if I click on login here the text is Chang uh I mean it is the login component the login page and here the URL is also changed if I click on contact us you can see that the URL change and I am at the contact us it's also show you the content of the contact us go to side Pages contact us uh I just change the text it is contact us page you can see here login it is contact us page and it is homepage so guys we see how we can handle the navigation in application so it was a basic introduction you can can um explore the topic in more detail if you want to handle the navigation in a complex way thank you for watching the video goodbye

Channel: Noor Codelogics

Views: 39

Keywords: react router, react router dom, reactrouterdom, react routing dom, react react router, react navigation, react router dom v6, react router v6, usenavigate, react router dom npm, routing in react, routing with react js, routing in react js, react router 6, npm react router dom, install react router dom, react router link, react router dom link, browserrouter, react router npm, link react router dom, react router example, react dom router, react js tutorial, learn react js

Id: CIyxtPqLNCI

Length: 22min 12sec (1332 seconds)

Published: Mon Sep 11 2023