React Router Tutorial | React DOM Tutorial | ReactJS Redux Training | Edureka Rewind

Key Takeaways

components are the heart of react's powerful declarative programming model react router is a collection of navigational components that compose declaratively with your application whether you want to have bookmarkable URLs for your web applications are a composable way to navigate in react native react router works wherever react is is rendering hello everyone I'm Monika from edura welcome you all to the session on react router before starting the video let me take you through the agenda of today's session I will begin with discussing about what is react moving on I will discuss react router and then we'll see some of the advantages of using react router then I will show you how to install and set up the environment to use react router afterwards we'll see the different components of react router and before wrapping up the session I will discuss the types of react routers used along with explanation I will show you the demo also which will ultimately lead to a small react application using react router starting with what is reactjs so react is a JavaScript library which means it is a collection of code on which many developers are working for the last decade it allows us to build user interfaces for websites and also for other applications like mobile applications desktop application and VR applications basically react is more concerned about building interfaces so that the users can interact with getting data from the users and then display the information so I can sum up react as an open-source JavaScript library developed by Facebook used to develop interactive web and mobile user interfaces and it is component based where the components that utilizes the expressiveness of JavaScript with the HTML like template syntax are used now before explaining react router I would like to give you a brief to routing so routing is the ability to move different parts of an application when a user enters a URL or clicks an element like link button icon image Etc within the application routing is basically required in transitioning from one view to another in an application in simple words I can say routing is a process in which a user is directed to different pages based on their action or request now we are good to go to understand react router react router is a standard library system built on top of the react and used to create routing in the react application using react router package it provides the synchronous URL on the browser with data that will be displayed on the web page it maintains the standard structure and behavior of the application and mainly used for developing single page web applications it enables the navigation among views of various components in a react application allows changing the browser URL and keeps the UI in sync with the URL reactjs router is mainly used for developing single page web applications and it is used to define multiple roots in the application when a user types a specific URL into the browser and if this URL path matches any roote inside the router file the user will be redirected to that particular room react router plays an important role to display multiple views in a single page application and without react router it is not possible to display multiple views in react applications most of the social media websites like Facebook Instagram Twitter Airbnb Etc uses react router for rendering multiple views to make use of react router we have something called as react router Dom what is this react router Dom which is actually the react router data object model it contains the Dom bindings for react routers in other words the router components for our websites and if we talk about react router native it contains the react native bindings for react router now moving ahead let's see the advantages of react router because of which we are using react router so in react router it is not necessary to set the browser history manually and Link is used to navigate the internal links in the application it is similar to the Anchor tag which we know is very simple as we have learned in HTML it uses switch feature for entering and the router needs only a single child element so no complexity at all and in react router every component is specified in now talking about the installation part so what we can do is we can just go to our nodes official website and we can just download the nodejs whatever the configurations of your windows are we can just download it and once we have set up our nodejs on our PC what we'll do is we will just install create react app okay that will be very helpful while creating the application the demo which I'm going to show you in the later part of the video in that it will be very helpful the command to install create react app is npm install hyphen G then create hyphen react hyphen app I'll just click on this and this is how it is going to install create react app it will take quite some time but I already have it installed so I do not need it so I'll just stop this thing over here and after that when we will start off with our demo part we will execute one more command that will be npx create react app and we'll give the application name that we will see in later part of the video when we'll start off with the demo part while creating the application itself so this is what you have to do then you will have to go to the directory where you have created the application the folders so with this we have successfully installed our create react application which will help you to directly create and react application we can just add the components to that we can change the code and we can just modify it and we'll be good to go now let's discuss the components of a react router so there are four major components of react router which are frequently are always used whenever we are working with the react router so the first one is browser router then we have root then we have link and then we have switch so talking about browser router browser router is a router implementation that uses the HTML 5 history API which includes push State replace State and the pop State event to keep our in sync with the URL and it is the parent component that is used to store all of the other components moving to root so root is the conditionally shown component that renders some user interface when its path matches the current URL talking about the link so link component is used to create links to different roots and Implement navigation around the application and it works like html's anchor tag and talking about the switch so switch component is used to render only the first first root that matches the location rather than rendering all matching Roots although there is no defining functionality of switch tag in our application because none of the link parts are ever going to coincide but let's say we have a root that there is no exact in here and then all the root tags are going to be processed with which is start with slashes this is where we need switch a statement to process only one of the statements so this we will see by a demo so now I'll just open my vs code the editor which I am using you you can use whichever editor you want to use and then we'll see how to include these components of react router on the basis of the part of URL that the router will use to track the content that the user is trying to view react router provides three different kinds of routers now we will see the types of react routers so they are namely memory router browser router and hash router talking about the memory router memory router keeps the URL changes in memory not in the user browsers keeps the history of the URL in memory and does not read or write to the address bar so the user cannot use the browser's back button as well as the forward button it doesn't change the url in our browser it is very useful for testing and non-browser environments like react netive talking about browser router it uses HTML 5 history API which includes push a state replace a state and pop state apis to keep our UI in syn with the URL and Roots as normal URL in the browser and assumes that the server is handling all the request URL and points to root index.html it accepts Force refresh props to support Legacy browsers which doesn't support HTML 5 push State apis and talking about this hash router so hash router uses client side hash routing it uses the hash portion of the URL that is window.location do has to keep our UI in sync with the URL and hash portion of the URL won't be handled by the server the server will always send the index. HT HML for every request and ignore the hash value it doesn't need any configuration in the server to handle roots and it is used to support Legacy browsers which usually don't support HTML push State API and it is very useful for the Legacy browsers or we don't have a server logic to handle the client site and this route isn't recommended to be used by the react router Dom team and the syntax for these kinds of router we will see just in the import statements we just have to change it and we will elas as router let me just show you now what we'll do is we will set up our react application so we'll create a react application using Create react app and for that let me just go to my command prompt there let me just go to the desktop so I'll change the directory over here I'll move to desktop and then I'll run this command npx create hyphen react hyphen add app and let me call this app as Eda routing now this command will create so now here you can see is we cannot create a project name _ routing because of the npm naming restrictions name can no longer contain capital letters so we'll just give it as Eda routing now here you can see creating a new react app in this folder okay inside the desktop we'll be getting folder for react application that will be known as Eda routing and it will take some time it will actually take some time like around 2 3 minutes and once this will be done then what we'll do we'll move to our this application folder that is Eda routing and then we will install our react router Dom which I had explained you it contains the Dom bindings for react application we'll make use of npm and we'll install react router Dom and then we'll start adding the components I'm using the visual code Visual Studio code AS editor you can make use of any other editors as well now as you can see the dependencies have been installed and you can see over here as well like some 29 packages have been added so with this create react app we can simply create our react application and we can just add the codes we can add the components and we'll have our react application created with this we have successfully created our react application and the name of our react application we have given as AA routing okay as we are going to learn routing with this so with this you can see over here happy hacking and now we are good to go now what I will do is first we will move to the project directory or the application directory which we have created right now we'll give CD and edore r routing and now what we'll do is we will install the react router Dom for our this application so we'll give npm install react router D okay router D and we will give a space and hyphen save this command we have to give all right this will install our react router Dom for our existing application which we have just now created with the help of create react app it will also take some time but less than the previous one and yes with this we have successfully installed our react router Dom for our Eda routing application now what we'll do is now we will start creating or adding the components to the application now what we'll do is I'll just close this up and in my vs code I'll open the folder which has my application so in this yeah in desktop you can see Eda routing is there I will just open this one now here you can see our application or the main folder is Ed underscore routing then here we have node modules all these libraries and the dependencies are here like you can see Babel and all for es6 and all we have just for testing so all these are available they have been automatically added with the help of create react app and then here in this public we can see here is the index.html so if we want to change the title or the HTML part of our application we can just make changes over here or we can just create the new one we can just create a whole new code as well so so I'm not going to all these HTML and CSS part majorly because we are here to learn about routing first what we'll do is we'll go to our SRC folder and here you can see we have app.js file so this component this is actually where we will be using routers react routers we are going to make use of them over here in this application so that we'll provide the links and the switch and everything which will be linking to the other components so what we'll do is first of all let me just remove whole code because this is a default one this create react app is for the default one it it's like reacts default application which has been created now we have to create the components add them with the help of routers and all now first what we'll do is we'll import our router so what we'll do is we'll write import so as we have learned about the routers so we'll give browser router as we have seen this is the first component of react router so we'll give browser router and we'll alas as router then we have the other component that is root then we have link and then we have switch and this we have to get from react router Dom now here be clear with the thing that here this browser router is elas as router now to use react router what we'll do is we'll create some components in this react application so what we'll do is inside our this SRC folder what what we will do is we will create one more folder and that we will make it as component so we have one more folder inside the SRC that is component now here in this we'll create other files other JS files which are actually the components so let me just add one file as home.js then we will create one more about. JS and then we have contact. Js so these three components I have added now let's add some code to this so that will be available on the screen whenever we will be executing our application so let me just go to home and let's add some code like first thing is we have to import react from react and then we will write the function or the reducer we know function home which return heading we'll write like welcome to AED and that's it and then we'll close this function and we'll write this is export default app default we just save it and then next is our about component so in this we'll simply let me just copy it from here we'll just paste it and we'll make the changes over here here is about now let me write let me write something about Eda so Eda is in e-learning platform and let me give you some more things like like know more about Eda here now here we I'll make use of the anchor tag and I'll give the link www. [Music] aa. now here we have the link and I want to display this as well so what I'll do is I'll just type it over here as well and with this we have closed our anchor tag now when we have created this one and the anchor tag is closed over here now one more thing is we have to return something so here in return I'll put all this inside a div so this one is also ready and here I'll have to give this about the function which we have just now created let's save it and now moving to our contact component so again let me just copy this thing and we'll put it here now here what I'll write is like for queries cont that here now no link I don't want to give any link over here now let me just the number let me just put this over here and one more thing see and if I want to put it in the next line and all so I can just give the BR tag as we know in HTML and no need to give it like this let me give one more yeah now in this about what we'll give is we'll give the in place of about we'll give contact me just remove this anchor tag now let's make a little change over here let me just put it inside the address so that it will be like a single element over here and let's just remove this heading tag all right and we'll just give it up so we have created three components and we have added them the home component then the about component then we have our contact component now in this app. JS what we'll do is we will make use of our react router and then we will link these components now what we will do is we will start adding the components to our app.js the components of react router over here now as we have already added this browser router as router now let me just create class app extend component and then we'll give it as render we'll make use of render function then we'll return router and inside a div we provide the class name give it as app and then we have closing tag for router now moving ahead what we have to do is inside the div we have to put the links as well link is also one of the component of react router before moving ahead we can just see let me explain you the components which we have created especially talking about the props associated with the root component we'll see over here as you can see the exact right this this is used to match the exact value with the URL for example here we have given exact and then the path that to home component and this will only render the component if it exactly matches the path if we remove exact from the syntax then UI will still be rendered even if the structure is like slash and home like that and then we have something called as path over here so this specifies a path name we assign to our component the path name which we have assigned like contact home about like that and then we have something called as component it refers to the component which will render on matching the path these components which we already have contact home about all these and as we have seen in this we have switch as well this switch will be used to render a single component wrap all the roots inside the switch component so we have just wrapped it around and this link we have used to create the links to our components it uses the two prop to describe the location where the link should navigate to so here you can see this two prop this two prop has been used by this link component now let's see the output of this application or this code which we have written now we will see the UI of our application it's taking a little time so it will get executed browser will be launched here so you can see over here on Local Host 3,000 it will be launched here it comes now this is the page okay now whenever I'll click on home now we have moved to our homepage this is happening with the help of our router the components which we have used the link component we had made use of browser router and the switch now when I click on about us here you can see the URL is also changing and with this if I'll click on this link so this is the normal HTML link part with the help of anchor tag I have just redirected to our Eda homepage let's just go back and then on contact us you can find it over here so whatever we wanted to display in our application that's being displayed in the different pages and we are redirecting to these pages with the help of react rout router and here is the URL and the application name is like react app we can make change in that also let me just go to this one and in the index.html we can just change the name of the title like we can change the title let me just give it so here I've just made it as Eda let me just save it and then it will automatically be reloaded here you can see now the name of the application is your Ed over here so this is the output which we we are getting so this is how finally we have successfully implemented the navigation in our react application using the react router now as earlier we have talked about the types of react router so let me just show you here so as you can see in this app.js we had made use of browser router so we have hash router and memory router what we have to do is just in place of this browser router we can just simply put memory router and everything else will be same and we can just elas it as router similarly for hash router we just have to make change in hash in place of memory I have kept it as hash now it became hash router and the functionalities which are supported by hash router memory router and the browser router will automatically be implemented so no need to change anything else we just have to import that type of router and we will elas it as router itself and we have already discussed what are the functionalities and how these router are implemented according to their types with this we have come to the end of the session hope it was useful for you and you have enjoyed it do not forget to like the video and subscribe the channel to watch more videos from Eda YouTube channel until next time happy learning thank you