#78: Active Links in React Navigation: Enhance User Experience with Clear Page Indicators

Hello what's up guy today in this video we will see active link in navigation bar believe me guy today's video is very important because first of all you see here okay this was my code on which we are working and this was my Now look carefully at this particular code, I am on the About page, but if I show you this part, you cannot tell at all which page I am on right now. Let's say I am on the Contact page. I am going here again, right? By the way, now you tell me, after seeing this particular navigation bar, you are getting some idea as to which is your current active page. But if I take you here, then from Let's I clicked on the contact and I am If I show it to you in this way, then somewhere your attention is definitely going to the contact. You are saying that brother, all are black but why do I see this light blue, right? Then somewhere your major attention will go that yes brother, contact. Maybe right now you are on the contact page so this is the beauty of your active link and believe me in react router this is a child's work like you can't even imagine that like in yesterday's video we have created the navigation bar na I will show you Let me show you, you can't imagine, it is so easy, see, I know, you are getting complete excitement, but again one more thing, because we know the value of someone only when they leave, right, it is like that, look here. What we did not think, you can see here, like in this, I had to write a lot of JavaScript code to get it active or not, put all the CSS, do this, but in React Router, you will not notice, I mean, you will see, one second. Let me show you we have this header container nab yal perfect ok look carefully so you see guys na I na everyone's nab link and yes one more thing sorry I forgot to tell in yesterday's video two you write nab link but that Yours remains I mean when that like gets rendered to you right that remains your anchor tag and one thing did you notice and that is that by default act class is visible to you here see now I will click on at and boom Guys see, did you notice on not but here you can see that it adds an active class automatically, react router automatically adds active class and if I watch this part carefully look at this particular page. Ok on this particular right now it is active here but the moment I will click on the movies boom guys see this look what happened you are watching you are watching na you are active means how awesome is it na react router that like the moment you click If it is active then it adds it but yes and it is already doing my work. Look about it. Look, the color has changed. So one simple way is that just by default and an active class it adds it to us. You don't have to do anything, you need to go to your like CSS file here, I guess I have used active class somewhere, yes ok, look, I have used active class and change the color only you dot active. If you go to class CSS and give it, your work will be done, your work will be done, it is so simple but I had promised you that I will tell you three ways, okay see those three ways, there is one here, like many times we class name. Many times we can give style directly and there is another way in which we can also create a function, so today I will tell you these three methods in this video and you are going to enjoy a lot, so guys, I would like to tell you. I keep uploading awesome videos daily, I need your support a lot because nowadays the channel is down a bit, I do n't know why what happened but I need you guys, please like the video if you like it and share it with your friends. Please do it if you have any doubt, if you want to see something else, like in your mind, brother, please tell me a little advance, then comment, what do you want to see, I am here for you, please subscribe, guys, next I got 7 One lakh subscribers is a work of two seconds, click on the button and it's over, like, I get motivation, money is not going to go to anything, okay, then see it, it is very awesome, I will tell you three ways, it will be fun, okay, so first of all, let's go with our classes. The style is fine, once you know it, the first style is that by default we get an active class, so just dot dot active and change the color, your work will be done, okay, so let me go back to my header, so let's Go with a class style, I go to Let's or Home style. Okay, here I have the class name already, so now what do I do. Look carefully, this is very important guys, you have to understand the conditional styling of all the things. How can you do it, so I want to write a JavaScript code, so we will put curly braces here, so guys, I have to remove this also. Okay, like I told you, how can we add style in the class name, so for that we need. To create a function, I am creating a fat arrow function, inside this also I further deconstruct it and I get a props, one is fine which you can call parameter and that is your is active, so this is a property which by default is react router. Provides us and it makes a noise that when you click on that link then it checks that its not true atria and not our neb penis, so by default we get it and give you a bud brace. Because we are writing a fat arrow function and here you will have to write the return keyword then again you will have to give another bud brace which is active. Based on this you can apply conditional operator that yes if active is true then now like That our nab link a, like this one, which is a particular class, is it the default class in every one, so you add this and at the same time you add the active class, we are getting this by default, but we are getting this with our own hands. Are you sure about whether we want this or not? Or you can give some other classes instead of this active. Here either you don't give active directly, you can do that also on this but it is okay. And here by default you should keep the name link which is yours, keep the name link is ok or this is it. Now you must be thinking, why am I getting it in this way, then there are many reasons behind it. Well first of all I would have removed it completely because I could have written it directly with return ok and I just notice or you could have done like this guys I think we can reduce it further I mean fat arrow function What was the beauty of the beauty was that if there is a single line of code one second who am I deleting and this if all right all right all right I guess now it's like it got even better for you guys let's check it Is it out? I would like to go here and do one thing. Let's go here and refresh it once. Home About Movies or Perfect. This is working. It is working on console. I go here. And elements again here div. Neb yal all right or working about removed or active aa gaya ok ok this is working for me so the first method was that you can work in this way and a beauty is now you are here no matter how many You can add classes, I just wrote active, the moment if I link active then I know now one thing is bothering you in your mind and that is brother, when by default you are getting active, why are we pointing fingers here. Now let me tell you the moment, if you use class name and you use isactive, then that which was a default behavior, which is active, is not what we were getting now. Look carefully at what you get, I go to inspect. Firstly, opening it again and again is a hassle, isn't it? Because it's all right. We have this active link. About. I went to it. I came to home again. Have you noticed? Now if I look here, Now I am going to Home About, see did you notice and not but at the moment I use a class name in which I use the parameter 'Is Active', then the default behavior that gives this active class gets lost. This is why we can give our own active class, I can do that, so I know that the moment I wrote that, then your default behavior goes on, okay, this was the first method, let's go about it, what is the second method? Let me tell you secondly, we can also do inline CSS, you can do inline CSS also, you are doing the following right and guys here, the same thing which I told you a little while ago and I think maybe at that time I made a mistake. Granted, I had told you that in the style section, I had told you something like this, when we were using classes, class name but class name, it became so easy, here also it is the same, again it is active by default. Now here, why are we writing return? You know, we are writing return because what we do with the help of style attribute is basically we pass the color, like we have given the style, yes, this particular element, the color of this particular element, please give this understanding. Now add the background color, we do this with the help of style, so I can say that the blue color I was getting, you will have to tell me in this way, yes, whatever color it will be, okay, you understand. Yes, now obviously I can't do it here, here it is basically a property of color red blue green, I can do it but I can't do it directly, now I have to go to active in this way yes, if it has color then it is not blue. So a black, what I told you a little while ago about the class name was for the style, I am really sorry but I corrected it and told you how easy it is, our work is done and you can do it in this way, okay I do one thing, I make it red so that you know, here we go, so it's a home page and if I go to the about page, boom guys, look at this, that means I am working, look at the about page. The color has become red, how did it look? And this is it, don't you think, it is looking so awesome, I will go to the movies, this vapor means everything but we made its color red, it means that yes, you can adopt this style method, so we saw the class name. We have already seen the style and the default behavior is active in the starting. Now I will tell you the third method and that is somewhere brother, this is a very time pass code, I did not like it literally, so what can you do. Na, copy this only, let's go to the movies, okay, I went to the movies, why should I write so much code brother, in what happiness should I write, do you understand what I want to say, I, I don't want everything, I will tell, I will get nab link style. I would like to call the function here and here we go so it's a const get nab link style and or this is it and I guess I guess I guess I didn't want to style the entire style, this is the part I just wanted and I had no need for this also, I could have directly copied and pasted it or this is it, you can see, so guys, how did you like it? It is so amazing that you have created a function directly and look at that function, it is so long. Meaning, it is looking so simple, not so beautiful, not so elegant, not giving that feeling, you can see this, I do one thing here, I then change its color, instead of red, I make it green so that Let us know that the output of different different is coming to us brother, boom guys on movies, see this, see this, about home, we have blue color, about red color, we have seen the movies, I had done green, I became green, so today we In this video, see three ways how you can achieve our active link, so guys or this is it, that's all for this video today, I really hope that you would have liked the video very much, so if I tell you the truth. So somewhere, this style part seems a little over to me, even this is a great over, but yes, it will be perfect because okay friend, what has happened, isn't it, according to me, this is right, even this particular part. If you feel like it, then make it a function and just pass it here, which I will tell in the next video, further improvement but I think class name is fine, else if your application is small, okay, not that big, then bye. By default, the active link gets added to us, I mean, the active class gets added, why do we have to do so much, it becomes direct from that only, it is fine, so or this is it, I hope you would have liked the video very much, and Joe will tell you in the video every day. Hey guys, please practice only that one, try to further it and dig that brother, what else is there and what can we do, like I told you in the web link, we have is pending, we have is transition pending or one more thing too. The transition will happen here or here, then you see what is this pending, what is this transition, what is its function, this code is visible to you in this way, what is the reason behind it, where can I use it? Guys, unless you check out such things yourself, you will be stuck in a tutorial like Help, because if you learn as much as I tell you, then you will never be able to move ahead of me, but as much as I know. I am teaching that much but if you learn more than that then like it and you will surpass me which is a very good thing isn't it or this is it guys please like the video if you like it and share it with your friends. If there is any sourness in your mind or doubt or if you want to see something else, comment, I am here, I want you to comment, interact as much as possible with my videos, share it with friends, do not forget to subscribe. It is very important if you do not subscribe then the channel will not grow, I will get demotivation, so guys please subscribe, I will meet you till tomorrow's video guys, thank you so much take care [Music]