REACT JS TUTORIAL #7 - React Router Params & Queries

Key Takeaways

so before I get into handling complicated data with react that would be flux or Redux which I'm really excited to get into uh let's go ahead and just cover a little bit more on routing handling routes handling route information and then let's get this HTML if you'll remember right now the entire HTML is just rendering into this so we want to get almost all this HTML into our actual react single page app so we'll want to convert that all as well once those two are out of the way we're ready to start taking on a a framework style approach to react um and that's really where react gets fun really starts give you some great mental patterns uh so let's look at uh some more routing features right now lots of times say with archives you'll actually let me go back to my page lot times you want to go archives SL some article or say some article some filter you know you'll actually want to go to a specific archive so the easy way to do this is to um don't don't want to save my web page easiest way to do this is just add another route or more detail to my route so we're going to go to archives and we're going to go to specific article and that'll be called article so I'm adding what's uh called a Pam now to my URL so let's go and do that let's refresh so now I got archives which no longer matches that's very important to know now this path is this route is only going to match archives article so that's going to be a specific article um and now it's going to match archives SL some article let's go ahead and look at this archives let's go ahead console log props now so I'm in the archives route again which is whenever we go archives and give it an article it's going to render the archives component so in this archives component let's go ahead and inspect these props now uh you can see that it's passing a pams and article has a value so it's some article some other article let's go look at it now rendered article is some other article excellent let's actually go spit this out on the page here there we go this props H sorry not props pams and I'll clean that up in a second so there you go some other article some other you know it's basically going to change as my as my path changes so that's cool um and the way you could really clean that up is you'd go const uh pams equals this props and then I can just go pam. article that cleans it up a different bit a difference or if if you were pulling multiple pams and then you're pulling multiple values out of those pams you could even clean up more so then this could just be article you know for if you're if you're adding a lot of values to your render method it really helps to have nice clean small variable names U so there we go that's rendered in uh another thing you can do without any configuration on your route is just you can just use Query variables so we can just add a question mark and let's go say date equals today and now if I look at again my props object I can look at the location and I've got this query in there and that's just real time going to be any of your query brand values date today and filter equals none so then I can go back to location I've got date today filter none so let's go ahead and snatch that pull that in cons query equals pulling query out of location and then let's go ahead and get what did I Ed date and filter so then let's uh wrap this in a div since I can't return just three H1s and then let's actually spit out date filter and there we go now I'm snatching all my information that the user might be passing in there date today filter none and then if I were to say filter all there you go it's all going to change real time yesterday blah blah blah um and then lastly you can also make stuff uh you can make stuff optional so I can go to archives and I can actually just wrap these in parns and now it will match if I do article or if I don't have article in there so that's probably more what I want the archives page to be doing so that's how you do that let's go and take this archives link now uh the last thing I want to show you in this video is lots of times you want to know if your route is active you want to add a class like up here if the featured route was active I'd want this to have the class. active for all my bootstrap stuff to look good uh so that's very simple to do with react router let me go to my layout yep here we go so you're simply just going to add active class name as long as you're using the link component you simply just go active class name equals and then whatever you want that to be so in this case I've added active class name equals test so whenever settings is let's go ahead inspect this archives element I do not have a class name of test but when the archives route is there Boom the active class of test just got added and again it's gone so that's kind of really nice and then if you wanted to do it programmatically programmatically um then you can actually get this out of History so if you remember I always have that props history right there you can see so let's get history out out of props and then you can go history do isactive and we'll just look up we'll just look up archives let's console log this so we're going to console log if archives is active let's say so false true false true there you go so now um everything's working we can go ahead and just pull our components in I'm not going to bore you by doing this in front of you uh but I'm just going to go ahead and take the navigation out put it into layout as a navigation components uh get the footer out into its own stuff basically just get all this stuff broken out into layout and then from here on out we're going to cover flux and Redux and data and a whole bunch of fun stuff so at this point get comfortable with how react Works get comfortable with how routing works you want to know those well before you get into the framework aspect of react so once those are good to go check out the next videos