hi guys in this blog we're gonna create dynamic routing like whenever we click on this username breath internet you're gonna get a new routing and the page the information that we're gonna send to the page now back to our code in here user.js what we need uh with router component that's provided by the react router dom when we need it because this component doesn't have the routing props like history location and match so that's why this with router provides uh props like with router uh like history location and programs now in here what we're gonna do we're gonna use this part in here i'm just gonna give it the history props and what we can do next is we're gonna give this as a cursor to be a pointer and also we're gonna use this on click method event and we're gonna use handle click our own method that i'm going to create now we have seen that we can create our own method in a class component but we can also create our own component in a functional component as you can see in here we can use the const keyword using inside yeah that's how we can do and of course whenever you have the state of this component then you cannot use by like this because we haven't like we haven't got this keyword so that's why we're gonna we can use in here so i'm just gonna provide the history dot plus and use the string interpolation and use it like this and user name now if i just save it and go to our browser you can see that whenever we use test at redtest.com and if i just click on it we can see we got uh route to the brat now once again it doesn't provide me anything yeah right like whenever we route it to it doesn't give anything now what we can do in our code in our home.js what we need just to give this exact exact that's what we need first of all so that the exact can be used in here now we need a route with have a part not exact and we can use law slash colon username you can give any name in here username or any id you can give anything now i'm just gonna provide the component in here the component in this profile as you can see that i have created one profile.js so it doesn't have imported i'm gonna import it but first of all just write in here import react from react use the cost keyword and use the profile and provide return something and use it like this as to to like i haven't provided anything right so we will see next what we can do how to provide something in here so for now i'm just gonna give it a profile name so export default profile why is it always get imported right now if i just go to home in here if i just write in here we got profile now what we can do back to our code now in here we're just gonna see what happens now if we just test it and use this breadth we can get the profile now just one thing required we have to give the like what are the information that we want to give to this profile page right so back to our user.js what we need in here that after the part that we have given we can use something called an object and in here you can give the names that you want to provide to it you can use a details keyword key and give the name that you want to give or you can use like this you can just give the name that you want to give name email and what we call okay i haven't given right so name email email and also we're gonna give the username right so i'm going to give username now if we just save it and back to our code and also we're gonna see what happens when we click on it so just get excited for now so in the components i'm just gonna get got to go to the breadth oh we're just gonna click it now and we provide you the profile in the profile you can see that we have these props history location match but we cannot see the information that we have provided so what we can do in this location there is one state right in here you can see that we got the information that we required right email name and username so this is the part that we need to know so in here in our profile.js what we can do we're gonna extract the location and from the location we gonna extract the state right and in here from this state we can extract the username email and name now if i just use it here username so you can see this is some like extracting part you can see in here that first of all we got the location oh you can see in here that what we can get location there is one called state and after state you can get the username and email and password so this is called the structuring you can say yeah so in here username i'm just gonna extract the username in here and just back to our code just minimize this and just gonna test it and if i just click on brat you can see that we got the breath right okay uh you can see that we got the brat now in here if i just go to internet we also get the internet so now the only one thing is required we have to display this information so like we are like going to end this insta app in maybe one to two blog so let's start displaying all the things that we need in here so in here what we need first of all we need this div tag and the div tag we need one more thing because i have used the assets in here the assets that we need in here user.svg so i'm just gonna react import react component as user from from dot dot slash dot dot slash assets slash user dot svg now in here what we can do we're gonna just give a new div and wrap this user inside it and we also need a new div inside the d we need you can see another div and in the d we have we can prove hide i'm just gonna copy it because we're gonna provide three things in here first of all we're gonna provide the username then providing the name and the email so in here i'm just just gonna do the styling in here so just using the styling use the style purpose and just gonna give the width to 80 percent margin to 0 auto and also going to give the styling in here what is telling we're gonna give we're gonna give the height to be maybe 200 pixel and width to be 200 pixel and also going to you know that's all that's what we need maybe now in here what we need we need a styling styling to be a display flex and flex direction to be a column so that it will be a column wise so yeah that's what all we need and yeah there's one more thing over here we need that is display to be a flex and flex direction to be a row and i'm just gonna give this styling to a font size to be of maybe 2.5 rm and give the styling of it font wait to be a bold yeah that's it let me just see look into it what the picture looks like now if you just go into it and just see it okay this look good now we're just gonna give some margin top and we're gonna just give also some padding too so i'm just gonna give the margin top to be maybe 25 pixel and after that what we need we need uh so what we can do here that we're gonna just remove this part and give the width to be of 40 and in here we're gonna style it the our svg file now what we're gonna give we're gonna give the width of 150 pixel and the position to be a relative left to be a 50 percent and yeah that's it that's what we need now if we just save it and go to our code and just again test it and in here you can see that we got the things that the type of thing that we need so this is how we display in here now we can just okay we can also use this links in right purpose there also one thing that is to be required we can see we're gonna finish these things all in the next blog and that we go when we are gonna click on this instagram app it will be redirect to this last one and also use this logout for logging out from this whole screen and go to the login page so that's all thanks for this blog thanks