Learn React Router With Project | React Router Tutorial | React Tutorials for Beginners

hey guys welcome back so in this video we will learn about react router we will continue to enhance our contact manager application using react router by creating different routes for our different components so if you have missed the react fundamentals video i recommend you to watch that first you can just click on the card above and jump to it directly also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] all right guys so this is the application which we built in our last video which was the react fundamentals and we can see that we have all the components are listed on the same page which is on the local host 3000 we have the header component we have the add contact component and we have the contact list component but now what we want that we don't want all the components to be listed on the same route which is the localhost 3000. we want different routes and different urls for our different components i want that when i go to localhost 3000 slash ad then i should be able to see my ad component and when i visit just the local host 3000 i should only be able to see the contact list where i should have a button called add contact and when i click on the add contact i should be able to go to the localhost 3000 slash ad to the add contact page so for this we need to use the react router and the react router actually helps us to navigate between different components helps us to change the browser url modifies the browser history and maintains our page ui state without refreshing the browser so to do this routing we need to use a package called react router dome so to install the react router dome package i will go to the terminal and open new terminal then i'm going to go to my contact app and i'm going to write npm install react router hyphen dome hyphen hyphen save and let's hit enter and this is going to install the react router dome package so meanwhile let's go to our application code and what we had we have a components folder inside the components folder we had the app.js and if we go to the app.js then let's minimize this then we can see that here we have all the components one after the another and this is where we are going to apply the routing all right so now our react router dome package is installed successfully so if we go to the package.json then we can actually see that we have the react router dome dependency and now what we are going to do we will go to our app js and we are going to import the react router dome so from the react router dome i need the browser router so i'm going to write browser router and i'm going to give an alias as router so i'm going to give an alias as router the next thing i will need is the switch i'm going to explain you each why we are importing this router switch and the last thing we need is the route so let's go and import the route and all this are coming from react router dome all right so now we have imported whatever we needed and the next thing we need to do is first we are going to set the router so in order to set the router you just use the router all right and now inside this router you need to add your components which you want to be route so i'm going to add all the three components first so i'm going to cut this paste this here all right now i have all the three components inside the router but we i don't want my header to be have a different route my header should be constant throughout the application so i'm going to exclude this header and then i'm going to add the routes so to add the route i will do the route and the route has a prop which is called the path where we can specify that what url we want so if i want to go to the add component my url should be the localhost 3000 slash ad and when i actually go to this path what component you want to load so for me i want to load my ad contact component so let me add the add contact component and for time being what i'm going to do i'm actually going to just comment this out and i will comment this as well and then i will going to add one more route which will be the slash which will be by default the home and when i go to the home i just need to have the contact list all right and as soon as i add the contact list i'm actually going to get an error because this contactless component is expecting some props so for that what we can do for now if i go here and this function the map is not able to find the contacts so for now what we can do i'm just going to remove this and i'm going to add a constant as contacts and this is going to have the id so let me have an id as one then i'm going to have a name so this is going to be a the page and then i'm going to have an email and this is going to be cs at the rate gmail.com and we are doing this just for now so now as soon as i save it you can see that on the home page i only have the contact list now and if i want to go to the ad then i can actually change this ad and this is going to give me the ad contact but one thing you will be noticing here that when i go to the slash add why i am seeing the contact list so how it works so first it checks this path so in the add contact also you will see that there is a slash path so first it will look for the slash add and it will take you to the contact add contact but then in the next part also it will search for the slash and you will see that there is a slash so it just matches the slash and it gives me the contact list but if you want to do that it should only go as soon as it matches a path it should not go and look for the other parts so for that what we can do we can actually write the switch so the switch will do one thing that it's only going to find the match as soon as it finds the match it will not go and search for the other routes so i'm going to copy this and i'm going to add this here all right and now if i save it then i actually misspell the switch switch all right and let me change this switch here all right and now if i save it then you will see that i am not able to see the contact list on my ad contact and if i just go on the slash then i will be see the contact list but there is a problem the problem is that if i just remove this and if i add it above then you will see that the contact list works fine but if i go to the add then in slash add also i'm able to see the contact list so in both the cases i am seeing the contact list and this is because the switch will match only the first route if it matches the first route it will not go and check for the other route so that's the reason is if we go to the slash add it actually matches this slash and on the slash we have the contact list so to solve this problem we can actually add a crop and which is called the exact and this exact will match the exact path so now if i save it then you will see that it will match the exact path that does it has the only slash no but it doesn't have only slash it has slash ad so that's why i get the ad contact and if i go to my home page then it's going to give me the contact list so that's how it actually works so the next thing we are going to do is that on the contact list i need a button to go to the add contact because i don't want to go to my url and manipulate the url and go to that component so let's add a button here so i'm going to go to the contact list and inside the contact list i'm going to add a button here and i'm going to add a button and this button will say add contact and let's add a class name so i'm going to add a class of ui button blue right all right and if i save it then you can see that i have a ad contact but now what i want if i click on it i should be able to go to the slash ad so in order to do that we need to import one thing and that is the link from the react router dome so so i'm going to click here import and from the import i'm going to do the import of a link and this will be from the reac router dome so we add this brackets here and that is because that this link component is not a default exported component when there is a component which is a export default component name in that case you don't need to add the mustache or the the brackets and that is where you can see that for the contact card we did not add any uh curly braces but for the link we need to add the curly braces because the link is not a default exported component so what we can do we have imported the link and we can actually add this link component here and i will add this inside the link component so i'm going to cut this and i'm going to add this here all right and inside the link you can actually pass the prop which is the two and for the two i can give the value as slash add that it want to go to the slash add route and if i save it then you will be able to see that if i click on the add contact i can go to the add contact component so now we can actually go back here and we can go back and forth so if i go to the add contact and now let's try to add a contact so i'm going to add a contact as test and this will be test gmail.com and if i click on the ad then you will notice that we get an error and that is because we are not actually passing the props from our route so if i go back on app.js and you will notice that right now we only have the component but the real was we need to have a prop of add contact handler so now the question here is how do we add the props when we actually have a component in the route so the one way of passing the props in the routed component is that inside this component we are going to have an arrow function so i'm going to add an arrow function and inside the arrow function i'm going to make this changes and now i can actually pass the prop the prop name was add contact handler so i'm going to copy this and i'm going to add this here all right so this is one of the way and we can do the same thing for the other one so let me add the same thing for the contact list so for the contact list i'm going to have this arrow function and inside the contact list i'm actually going to pass this information so i'm going to copy this and i'm going to add this here all right and now we can see that we have the contact list component and we are able to pass the props as well so i will go here and i will remove this because we don't want this now we are able to pass and this will become back the props dot contact all right and now let's give a try so if i go back then you will see that i can see my contact list which is coming from the local storage if i click on the add contact and let's add one new contact so i'm going to write a new contact and this will be new at the gmail.com and if i click on the ad then something is happening the contact is being stored in the local storage but the ideal case should be that we should be redirected back to our contact list so that we can see that the newly added contact we are able to see it on the list or not but if i go back then you will see that my contact is being added but there is one problem with this approach and the problem is this what happens when you actually add a component name inside the component and react internally uses react dot create element in order to create the component but what happens when you pass it inside an anonymous function so each time when we visit the route or the url then each time the anonymous function will get executed and each time we will be creating the create element and that is actually going to do a performance issue because we just want to update the component which is created once we don't want to recreate the component every time so that's why we are not going to use this approach to pass the props instead of this there is an another prop which is the render and we are going to use the render in the route so let me show you what actually i'm trying to say here so i'm going to remove this first so let's remove this all right and instead of adding the component i'm going to add an another prop which is called the render prop so inside the render so the syntax is a little bit weird but you will be able to get along if if you write more and more code so the first thing is we need to have the props so i'm going to add here props and this props will be a arrow function and then here i can actually do the add contact all right and inside the add contact we are going to destructure the props we have so let's restructure the props and after destructuring the props we can actually add the props which we want to pass so i'm sorry we need to pass this one so let me copy this and i also made a small mistake i need to have a contact list here so let's add a contact list all right so now this is a correct approach when you actually want to pass props in your route so now if i refresh it then i still see the same results so that's that's fine so we need to change this as well because we are not going to use this approach to pass the props so let me remove this and here i'm going to add the render all right and inside the render we need to have the props and inside the props i'm going to add the add contact all right and inside this add contract we are going to destructure the props so let's destructure the props and the pass the props which we want so i'm going to copy this and i'm going to paste this all right and now let's remove this because we have the routes properly configured all right now if i refresh it and if i click on the add contact i'm able to see the add contact and let's add the add contact so the new contact will be max and it will be max gmail.com but i'm not going to click on the add and that is because when i click on the ad i want my contact to be persisted in the local storage but at the same time i want to be back on my contact list page so what we are going to do we are going to add a programmatically route the route will happen uh programmatically when some event is triggered the route will happen so let's go to the add contacts so let's go to the add contact i'm on the add contact and where is my okay on submit all right and here what i'm going to do is here after we clear the fills we actually need to go back to our contact list page so one thing i want to show you before i write any code i want to console and i want to do console log this dot props let's go to the console log so i'm going to click on the inspect i will go to the console log and inside the console log if i add something so let me add max again so i'm going to add max and i'm going to click max at the rate gmail.com and if i click on the ad then you will see that i have some additional information in my props so i have a history and if i use this history dot push i will be able to add a route where actually i want to go so what i'm going to do is i'm going to remove this now all right and we are actually going to do this dot props dot history dot push and we can actually add the route which we want to go so we want to go to the home page so which is the slash all right and now if i save it then let's do a test three test at the gmail.com and now if i click on the ad we should be able to add the new contact and we also should be able to navigate to the contact list or the home so if i click it then boom we are able to come to the contact list so this is how you can actually do a programmatically navigation from one component to other component the other thing in the route i want to show you is the when actually i click on any of the contact i need to go to that particular contact page where i can see the details of the contact so for that what we will do let's go first to the contact card so i'm gonna go to the contact card so i am inside the contact card and in the contact card we can see that we have the name and we have the email and on name and the email when we actually click on it we should be able to redirect it to the contact detail page of a particular contact so what we can do first we will be importing the link so let's go and import the link all right and this link will be from the react router dome all right so the next thing we will do that we are going to make this uh name and the email address clickable so i will come here and i'm going to add a link here all right and then i'm going to add the two prop so inside the two what i need to have is i'm going to do m equal all right and here i'm going to add the link so let me cut this let me add it below here all right so when i click on a particular contact i need to go to the contact detail page so for that i will have a route so i'm going to use a backtick and i need to go to a contact slash the id of a particular contact so we have the id so i'm going to do an id here so we already have the id for each contact so all right now if i save it then if i hover it then you will see that if i click on any one then you will see that we actually have a url so if i let me maximize this little bit so you will see that we have a url which is the contact and there is the id but right now we we haven't specified that when actually it goes to that route what component should get load so we are going to create a new component called contact details but for now if i click on this contact then you will see that we have a different route if i click on this we have a different route so we have different route for each of our contacts and now we need to create a contact detail page where we can actually see the detail of the particular contact so this is how you can actually add the id so now let's create a new component so i'm going to go here i'm going to create new and i'm going to add the contact detail dot js all right and inside the contact detail dot js i will just going to do a copy paste of this so that we don't waste time all right and here i am going to remove all this all right and we don't have any props at the moment so let me remove this prop and we will have an image so if i go to the image then we are using the jpg image so let me change this to jpg so this will become jpg all right and what we are going to return from here is a jsx so let me add a jsx quickly so we have a div with the class name of main and all these classes are coming from the semantic ui so we are using the semantic ui if in case you have forgot so i'm going to add a div with the class name of ui card centered all right and we are going to create a card then i'm going to have a class name and we are going to use an image so let's add an image inside this i'm going to add an image src and that will contain an alt tag of a user so let me add a user here and we have already imported the image so after the image i need to have a div with a class name of content all right inside the content i need a there with the class name of header and this is going to have the name as the page let's give a hard-coded value inside that i need in another div and that will contain the description and i'm going to give as cs dot the page at the rate gmail.com all right and now let's save it and now we have added this component so we need to add this component into our route so let's go to the app.js and inside the app.js we are going to add this as a route so before adding the route we need to import the component so let's go and import our contact detail so i guess we haven't exported the contact details so let's go and export the contact detail so let's change this to detail and change this to detail all right and now we can actually export it so let's go here and export it from contact detail all right and now we can use it in the route so if this is the route then adding a new route here which is the route the path will be slash contact slash and we were passing the id so if i go to the contact card then you will see that we have an id here so we can actually refer this id as colon id all right and when we go to that particular path we need to have our route and this route will be the contact details so let me copy this and let me add this all right and now let's try and if i click on the page then i can see that i have a contact detail but if i go back and if i click on daniel mentor then you will see that the name is still the the page which is incorrect so what we need to do actually is we need to pass the information of a contact to the contact detail page so right now we are in the contact card which is this from here we need to pass the information of the contact so that we can show this information in the contact details so how we can actually pass the information so what we can do is inside this link what we will do is right now we will i will remove this first or i will just cut it all right so this is r2 and here we need to pass two things first we need to pass the path and the next thing we need to part the data as well so what we will do we are going to create an object inside this and we have the couple of properties which we can use the first one we will use is the path name so inside the path name i can actually give the path name which is the contact slash id but apart from the path name i can actually give the state as a property and inside the state what we can do is we can actually pass the information which we want to pass to the contact detail page so i need to pass a contact and this value will be the props dot contact because this props dot contact contains the name id and email of my contacts so i can pass this props dot contact to this contact all right and if i save it then now let's go to the contact details and we have a props here so what i'm going to do is the first thing i want to show you that what information we are getting in this props so let's go and do a console.log and let's write it props all right and if i go and inspect then let's go back first all right go to the inspect element and now if i click on this daniel then we have a object and this object is printed from the line 6 which is the console.log.props so if we go here and if we see that inside the location inside the location you can see that there is a key called states so if you can't see i will just zoom it out there is a key called states all right and in this state we can actually see the contact which we actually passed and this is what we wanted in order to display the information of a contact so we can make use of this information and we can display it so let's go back here and now we know that we get the information in this prop and let's destructure the information which we want we want the name we want the email and we can get this both information from props dot location location dot state dot contact all right and now let's copy this and add the name here okay and we can actually add the email here so let's add the email all right i have saved it and we will do one more thing we will be creating a button here so that from the contact detail page we can go back to our contact list so let's go and create a button so i'm going to create a div with a class name and the class name will be the center there all right and inside that i'm going to create a button and the button will be having back to contact list and let's give a classes to the button so i'm going to give a class name of ui button blue [Music] center all right and now if i save it then you can see i can get the back to contact list but if we click it nothing is going to happen and we know what to do here we are going to make use of this link again so i'm going to add the link here link and inside this link we are going to have the button so let me cut this let me add this button here and we can do the two and inside the two we want to go to the slash all right and let's save it so now if i click on the back to contact list i should be able to go back to the contact list and if i click on mic i can see here mike and and his email id if i click on max i can see max and max email id if i want to delete it i can delete it if i want to add a new contact let's add a new contact as max again and this will become max at the gmail.com if i click on add i can see the new is added so you can see that this is how easy it is we are navigating between different components and it's so quick and so fast because the page is not getting refreshed and i have a little assignment for you that when you click on the delete you should actually go to a new page which should be slash delete and there you can show a message that are you sure you want to delete a page okay or no if you click on the ok then the contact should get deleted because delete functionality is already working you just need to move that piece and take it to the new page when you click on the ok you should be able to delete it and you should be able to get back to the contact list page so all this information is already there in this tutorial and you just need to do a little bit of a new create a new component for delete and then do the functionality so this is an assignment for you but don't worry if you get any problem or you get stuck anywhere you can put it in the comments i'm going to help you immediately so that's all i have for this video this is what the react router is and that's it you need to know this information and even though it's a small application you will apply the same thing like how to go programmatically navigate the page how to make the switch route routers use of link passing data in the routes and the important thing is passing props in the route so we have covered everything and that's all you need to know and if you like this video a thumbs up is appreciated also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one and you can connect with me via facebook or instagram follow me on twitter for the updates and thank you thanks for watching

Channel: Dipesh Malvia

Views: 7,193

Rating: 4.9828324 out of 5

Keywords: React Router Crash Course, React Router Project, React Router For Beginners, react router project, react, react tutorial, react project, react router dom, react router history, react router tutorial, react js, react router switch, react router

Id: kMBjhiGYoLY

Length: 32min 24sec (1944 seconds)

Published: Tue Jan 26 2021