hi guys in the previous blog we have build a login page but it doesn't do anything like it doesn't go to the next home page so we're gonna start building it so back to our code in here we're gonna write some code and I will explain it what it means like I am going to give some name is locked is login right is logging to be true yeah what it does like whenever in here Abdo jeaious we are gonna send an attribute called is logged in such that this app door just has like has the idea that we have been logged in so for this we need a class component because we're gonna create a state that's why we need a class component now I'm just gonna write exchange reacted component now also we need the render method so that return code also been like we have to copy cut and paste in here now in here what we need a state and in state view what we need is log to be false for now like in Easley it will be false so after clicking it on handle submit button it will be transformed to the true now what's the name is is login right now what happens that component doesn't provide like giving attribute based structure so what we need we need a render attribute for this one such that we can pass some attribute into a component so that's what I'm doing in here so I have I'm going to call this login component and I'm going to give is login that's what I have written in here and is equal to and I'm going to call a function or a method you can say so it's name can be anything that you want I'm going to give handle logging so in here what it does like handle logging it has the parameter so for now it's true that is being sent from this login and it will be set to the distal steady-state to is lock so that's what I am I am doing in here now if we just save it it will not work properly because what we need extra is a new page right so what can we do in here that we're gonna create a like we are gonna extract the value of is log from here from this whole state now in here what we can do like if not is log like if it is not logged in so it will suit this component and if it is logged in we're gonna so another company in here so for this I'm going to create a new page for now just to show you that it will be gone going to go and get a new homepage so I'm going to create a new folder called home in here I'm going to create a new file called home dot GS now in here for now I'm just going to create an import react from react and also going to give rain return and I'm for now I'm just going to return something called home right and also going to export it export default home now if we just save it and go to our app dodges what we need here is to import it and it has been put in in here and I'm going to just save it in here right now if we just save it and go to our browser and this is our localhost know if we just typing test test and you can see that we go have gone to the new page called homepage so that's it with we have created updates and it's in the same URL now what we need is a 404 page such that whenever we type in any like different name or incorrect name that is not given in our code it will redirect to the 404 page so for this I'm going to create a folder called 404 page and in here I'm going to create a new file called for for paste RGS and in here I'm just gonna write import react from react and also use Const and the name of this function you can give anything I'm going to give no match and in here for now I'm going to return I'll just say return this div div in here I'm going to give h2 tag which says for oh sorry 404 piece and B tag and saying that redirecting to and going to create an expand tag and here I'm going to give login page right now for some giving some styling of first of all and I'm going to give explore default no match so I don't know I have sales or not like we can selling inside JSX so how can we do this we can do this by you can say that CJ CSS in jazz you can say like that like me when I use style equal to two curly braces inside it we're gonna give margin top as you know that too it should be a camel case so I have given the Martin Thomas or we need margin left right so margin left of ten pixel and in here the span color should be I'm going to create a new styling in here and give the color of daughter blue right this is what we need now this space has been met now one more thing is required but first of all just use it in here so best practices would be that when all the route is filled then it should like it should return this route this for off page route right so we're gonna just keep part equal to I star this means all right so it will return component which will return the component called no match now if we just save it and go to our page here and if I just saw in here if I just type in anything and go to this login page but we want redirect to login page right just whenever we click on it for this to happen I'm just going to show you just in on in the control shift key like in console you can see in her components and there is this no match we have the props like history location match so what we need for now is this history props and in history props what we need is this boost method so let's go to our back to our code and he in here what we're gonna do in our 404 page we're gonna just extract this history properties and we're gonna use it here like whenever we con click whenever we call this on click method in this one it's gonna use history dot pose history dot pose and it will boost to the home like in only this less now if we just save it and go to our code and if you just refresh it again and if I just use login page it will redirect to the home in the slash space and I'm just gonna leave here cursor to be a pointer so that it will look nice now if you just go to goal and just right in here this part and if I just go to here we directly logging past you can see that we have been redirected to the login page login page right now this all things has been done know what we need that whenever we logged in we need to look like we need to make our app look nicer we have to made header part first of all so let's begin building the header part in the next blog thanks