hi guys in this blog we're gonna learn how to do nesting routing that's because whenever user logged out they don't have to see the bezels that belong to the like whenever user log they have to they can see that only pages but if they are logged out they cannot see that piece so for doing this in our code what we have to do in this home as we you can see I'm just going to remove these files for now in our home dot yes what we need we have to do the routing part yeah so in here what we can do we use import and just the same thing that we have turned in our app part we have to use import these components using from react out of town so in here what we can do we need a header part so that whenever we if I if we use switch also it will be remain it will remainder so in here what we need we're gonna create new components so first of all what we you cannot do we're gonna create a new base for it right in here what we're gonna create we're gonna create sorry for the name convention like I'm just gonna give this new home name and in here I'm just gonna give new home dog chairs and we're also gonna create a new page for Explorer too so we're gonna just create a new folder and just give Explorer and in here we are just going to create a new file called Explorer dodge is now in here I'm just gonna create import react from react and also going to export it Explorer and write Explorer it's a functional component for now oh it will be this one also so as to explore and export it explore default default Explorer now in again we're gonna just in new home for now I'm just gonna use it in portly act from react and also use this Const part comes to new home new home and also return for now I'm just gonna return this as to tag new home for now and also export default new home so back to our home file what we need we need route to what we need in here we need this less for showing the new home part and I'm going to use component for now maybe it's only needed maybe here so I'm going to use new home and ok sorry this is not - this is wrong we need part right so we need part and again in here what we need route part is equal to Slayers Explorer and component name Explorer right now if we have to reduce exact for now exact also so it knows that what exact route we need now if we just save it it looks good right no back to our apt Oh Jess yeah it's good now if we just go into a code just remove it and use localhost 3000 again now if I just go to tasted red test calm and taste it's working right now if I just go to this part hmm it's not working so why is that well what happens in here in our code that we have given this exact in here right so what happens when it doesn't get this parts let's explore it will it goes to this 18 number and that's where no match will occur so for this to remove we need this exact to be remove now after this also there will be a caveat soft of it and we're going to also remove it so if I just remove this and go in here and use this at the raters calm and you can see this is working and if I just go in here okay this is also working that's good now there is the time for caveat so what happens like if I just write in here this part it will not so the 404 page and this is what not this is not we need right because for this to remove it has to know that the exact part has been like it has been checked and then it's going to be 18 line number but we cannot write a get exact for now so for these two like we have to tackle it so for these two taking care of we have to like use this this symbol outside so what we can do if not is log so if it is not logged in so we can use in here route exact part equal to slash render and use this line of code in here so for now I'm just gonna copy it and we don't need the whole part in here I'm just gonna remove this part too now this will work now if I just now in here I'm just gonna wrap it and use this symbol and we also need this is too simple and in here we can use this part and use it in here and we have to remove these parts in here yeah let's look good yep some in I intestine is required in here yeah that's it that's what all we need now if I just go to our code in here I'm just gonna remove it and again localhost 3000 now if I just go to any piece that is not being used we got the redirection page and also if I just a set the rate is calm and use it here it's working right but if we can go in our header dodgiest there is also one thing that I have I have forgotten to use it yes that is we have to symbolize that what link has been like which link has been taken care of right so what we can do in here nave link provides some attributes called active class naming it shows that which link is right now active so basically it's a CSS you can say so we're going to provide the CSS for this one and in here I'm just gonna use it and we have given active class name has a class name called active and just giving border of border bottom of fire break and I'm just gonna save it and go to again localhost 3000 and go to our test at the red test calm and now it's not working right it should work oh my my I have done it wrong and here we have to give one pixel solid break right firebreak I have done it wrong so you can see in here that we got it just force okay we got it localhost 3000 there's address comm test yeah we get it it should good look good no it's not looking good so I'm just gonna create I'm just gonna maybe give some new pixels for it so we can check in here this is the part and I'm just gonna yeah this look good so I'm just gonna do the two pixels in here now if I just save it yeah it's look good yep so that's all in this blog in the next blog we are gonna create building our this home new home page so stay tuned
0 Comments