hi guys in this blog we're gonna start building our new insta app so why are we building this instead because we're gonna learn this react router library of react so that we can learn how to use the uh raw client routing the client side so in here you can see this is my github link for this insta app so in here if i just use this login email or password for this insta app you can see that we got to the new page but you can see that i haven't changed the link to some new url and i can so i will show you that how can we do this but first of all we're gonna see that this is the page we got this login homepage yeah like profile like user homepage so in here you can see these are the links in here this is the home page so that we have this under link in here now if i just click on this explore you can see that we got to another link and also you can see this is the explore text and i haven't made any change changes in here so if i just go back to this like link we just click on it we got to the home page now what react router gives like it's give the dynamically routing right so in here if i just click on this bracket you can see that we got to this breadth link as you can see this is a profile page of these persons so in here you got to another link so in here we're gonna just learn about this routing how can we do this link routing using the react router and we if i just use this logout and if i just go to internet and if i just go to log out we just go back to the login page and there is one more thing that we can show in here like if i just click on this this some random page you can see that we go to the 404 page so it suggests to redirect to login base so these are all the functionalities we're gonna learn how to build it in our app so uh i'm just gonna go to our app in here now first of all what we need we need the library right so what we're gonna install is this react router dom so for installing you can use just type in npm i react router dom as i have already installed it so i don't have to but you can so in here what we're gonna do we go we're gonna go to our index.js and in here what we need we need from react router dom component and the name of the component is browser router and we will see what's this browser router do actually browse router is simply like it will enhance our this app component to do something bigger like it's it gives the functionality to to give the routing purposes to this app component so we're gonna just wrap this app component with this browser router that's what we're gonna do in this page uh in this file so we have rapid right and now if we just go to our this our like we're gonna build this app so in here you can see now as you have already installed this react developer tools and if you don't just go to your um like uh what we called it um this add-ons page and just use this search bar and just download this react developer tools now back to our code in here you can see this app has been wrapped with this browser router and it doesn't have it have this router so that we have these things like history location and there are other things are also there so these and router providers so it's providing this app to provide this routing functionality right now what we're gonna do we're gonna just go to our code and in here i'm just gonna minimize this command prompt now in our app.js what we need we need the login page right so for login page what we can do i have already uh imported all the svg files or the assets that we need you can go to my github repo link and you can just download all the assets that we need for this project now what we need we need import some uh from the react router term and we need two things from here we need first thing is switch and second one is route and i'm gonna show what these all means these two things can do now if i just use this div and route two things in here what basically route does that it will route whatever like route to russia route but this is the part that we're gonna give and the path we can give slash and for now i'm just gonna render it gives this render attribute in here i'm just gonna render this h1 home and i'm just gonna use it and route part is equal to slash exp and i'm gonna render again two things like i'm going to use h1 exp now if i just save it and go to our browser you can see that we got this home right now if i just go to this slash exp we got two things home and exp but that one that doesn't that we don't want it right we need only this exp so by this syntax you can know that this route of part slash go to his home but slash exp will only go to this ex but we got two things so for this purpose what we need we need this switch but if i just use this switch also it will not be like it will not give the proper uh render part as you can see in here that we right now also we got give to get this home and if i just go to this less exp then also we got this home so we don't get this h1 exp so what's happening here that to whenever this goes to slash it gets this home but it doesn't check for another route after that's less exp so what we need in here we need there are two ways of doing things like we can do one thing like we can give this route before this route now if i just save it and go to our browser you can see that we got exp and if i just go to this one and i've i just refreshed we got this home and if i just use exp we got this explore so what happens here like it will go to this less exp and if i if it gots exp then it's better so if and if i this is the slash and it doesn't got in here it will go to this so and there is one more thing way you can do this if i just go back to the where it is now what we can do this it gives one attribute called exact and that what it's need in in here so what it does that if the part is exact this one then it will render this part and if the route has this exact exp slash exp then it will render this part so if i go to our browser and just refresh it and use against less and if i just use less exp so this this is how this done in here so what we need switch for like switching this routing and we need exact for what the part we need exactly part what we need for rendering so yeah this is the whole picture that we're gonna see um in our next all blog but we're gonna learn more about this routing purpose so that's all thanks