- 00:00:00 welcome back time to make these links
- 00:00:03 working after all the route setup has
- 00:00:06 been done so in order to add links I
- 00:00:09 will go to my header che s and then here
- 00:00:13 I will want to add my links in my header
- 00:00:18 I will import the link component if you
- 00:00:25 want to call it like that from the react
- 00:00:27 router and that allows me to create well
- 00:00:30 links and I'll replace the anchor tag
- 00:00:35 with link and this will get rendered to
- 00:00:38 an anchor tag in the background when
- 00:00:41 well loading it in the browser then but
- 00:00:44 for me here I will need to use link here
- 00:00:47 and not a not the anchor tag again later
- 00:00:51 on in the browser this will be an anchor
- 00:00:55 tag so here I then need to add the two
- 00:00:58 attribute to specify to which path to
- 00:01:02 route here and here I just want to go to
- 00:01:05 /home let's say and then I'm copying
- 00:01:08 that pasting it to my user and here I
- 00:01:11 want to go to slash user for now if I
- 00:01:15 save this and go back to my application
- 00:01:17 and click on user and then home you see
- 00:01:21 that this navigation works fine that's
- 00:01:23 all and if we inspect this you can see
- 00:01:27 it is an anchor tag indeed now
- 00:01:30 oftentimes you want to add conditional
- 00:01:33 styles or classes to the active link to
- 00:01:36 provided some CSS styling right well
- 00:01:39 that's actually pretty easy you can add
- 00:01:41 an outer attribute to your link here
- 00:01:43 active style and here you could then say
- 00:01:47 color or that we would need to pass a
- 00:01:50 JavaScript object to it and then say
- 00:01:52 color should equal red now if I save
- 00:01:55 this now you see it's red when it's
- 00:01:58 active sometimes you also want to pass a
- 00:02:01 class name so you could then add active
- 00:02:04 class name and then just specify let's
- 00:02:08 say you come to class and you want to
- 00:02:10 let's say active so in this case this
- 00:02:13 will get the active class whatever it is
- 00:02:15 active as you can see here if I navigate
- 00:02:18 away it doesn't have the active class
- 00:02:22 anymore but if I click on it again we
- 00:02:24 see the classes being added so that
- 00:02:26 allows you to apply conditional styling
- 00:02:28 to your links here depending on whether
- 00:02:31 they are active or not either through
- 00:02:33 directly specifying the style like so or
- 00:02:36 a class name which has then some
- 00:02:38 underlying styles in this case here
- 00:02:40 there it simply doesn't so we don't see
- 00:02:42 any change but it would be as you saw
- 00:02:45 when I inspected it the case that this
- 00:02:47 class gets attached to the link
- 00:02:49 sometimes you also want to navigate from
- 00:02:52 code and not through a link so let's say
- 00:02:56 in our user component here I'll add a
- 00:02:59 button where I say go home and on this
- 00:03:03 button I simply want to navigate home
- 00:03:06 now I could make this a link style as
- 00:03:08 about that's clear but I want to show
- 00:03:12 how to navigate from code so I'm just
- 00:03:14 applying some styling to the button and
- 00:03:16 then I'll add a listener or an abandoned
- 00:03:21 ler which I look hold on navigate home
- 00:03:24 and I want to call this function
- 00:03:28 whenever I click this button so I will
- 00:03:31 call this I'll navigate home then we add
- 00:03:35 parentheses here remember that we're
- 00:03:36 just providing a link to this method now
- 00:03:39 how do i navigate home here i need to
- 00:03:43 import something from the reactor outer
- 00:03:46 package and this something is the
- 00:03:50 browser history again so browser history
- 00:03:55 from react router
- 00:04:00 whoops and then I can go to my own
- 00:04:03 navigate home method here and simply
- 00:04:06 call browser history push and then the
- 00:04:11 path which I want to navigate so in this
- 00:04:13 case I want to navigate to slash home
- 00:04:17 right if I save this go back to the
- 00:04:23 application click on user and then I go
- 00:04:26 home
- 00:04:26 you see we're taking home that's all
- 00:04:29 that is how simple it is and if you look
- 00:04:32 at this command you'll learn why it's
- 00:04:33 called browser history we push and you
- 00:04:36 you are out on the browser history and
- 00:04:38 it gets pushed on the top which is why
- 00:04:40 we navigate there instantly so the
- 00:04:43 browser history now also includes the
- 00:04:45 slash home route which genis the active
- 00:04:47 route so we covered a lot
- 00:04:50 the missing thing for this basic router
- 00:04:52 overview is how to pass parameters let's
- 00:04:57 say here on the user page I want to
- 00:05:00 display the ID of the user right now in
- 00:05:04 order to display the ID I need to first
- 00:05:09 go to the index touch as file and change
- 00:05:11 my user path here because I'm expecting
- 00:05:15 to get an ID as I get parameter with
- 00:05:18 this URL so the URL should then be
- 00:05:21 localhost / user / the ID to tell the
- 00:05:26 react router that we are getting such an
- 00:05:29 ID so that we're getting a flexible a
- 00:05:32 variable element in our URL a parameter
- 00:05:34 I add the slash here and then colon and
- 00:05:38 then whenever I want to name this
- 00:05:40 parameter internally so that will be the
- 00:05:42 name by which I can extract that later
- 00:05:44 on I'll choose ID for now so this allows
- 00:05:48 me to access the slash well ID route now
- 00:05:53 of course if I save this does will lead
- 00:05:55 to an apple
- 00:05:56 which is broken because now this link
- 00:05:59 isn't passing an idea even though we're
- 00:06:01 expecting one so just slash user doesn't
- 00:06:04 exist anymore
- 00:06:05 you would need to enter something like
- 00:06:07 slash user five and then you see it's
- 00:06:09 working again so in order to make it
- 00:06:13 work again from our from within our
- 00:06:16 application I go to the header file and
- 00:06:19 here I need to pass something right I
- 00:06:21 need to pass more than chest slash user
- 00:06:24 I need to pass slash user and then
- 00:06:27 whatever I do you want to pass and of
- 00:06:30 course since we're in the template
- 00:06:32 syntax here you can also output some
- 00:06:34 content dynamically here right so you
- 00:06:36 could also add something like two plus
- 00:06:40 two here like so add if I save this and
- 00:06:45 go back well you see now it's navigating
- 00:06:49 to slash user slash four right because
- 00:06:52 that's just a result but I'll hard-coded
- 00:06:56 here for now I'll go to the ID ten and
- 00:06:58 with that well it's working again that's
- 00:07:01 certainly nice but we're not displaying
- 00:07:05 the ID here right
- 00:07:06 we are not extracting it how can we
- 00:07:09 extract our ID extracting parameters is
- 00:07:13 fortunately really simple too I'll go to
- 00:07:16 the user component which is where I want
- 00:07:18 to use the ID and then here I'll use my
- 00:07:21 single curly braces to output some
- 00:07:23 dynamic content in my template here and
- 00:07:25 then here I can simply get my routing
- 00:07:29 parameters by accessing this props and
- 00:07:31 then parents so the route params the get
- 00:07:36 parameters will be passed by react
- 00:07:39 router to my props variable here or to
- 00:07:43 my props property so I can't access any
- 00:07:46 available parameters again passed from
- 00:07:50 my react router automatically without me
- 00:07:53 doing anything on my props property and
- 00:07:56 then on the parents object and here I
- 00:07:59 know I will get parameter named ID
- 00:08:02 because that a year is the name
- 00:08:07 my index chair spot here that thing
- 00:08:09 after the : so this man here ID has to
- 00:08:13 match the name by which I extract it
- 00:08:16 here with that that's all if I save this
- 00:08:19 now you see user ID 10 and if I enter
- 00:08:23 something like 1 1 1
- 00:08:25 whoops that was wrong button something
- 00:08:28 like 1 1 1 well now you see user ID 1 1
- 00:08:31 1 that is how you can extract the
- 00:08:34 parameters so I think you are seeing
- 00:08:36 that passing parameters and extracting
- 00:08:39 them is made really simple with the
- 00:08:41 router XD whole we access router is
- 00:08:44 really simple to use
- 00:08:45 because I think it's very explicit about
- 00:08:49 how to use it
- 00:08:50 look at how you set up these routes it's
- 00:08:52 really simple it's how you would
- 00:08:54 mentally set them up because all the
- 00:08:56 nesting and all the dependencies are
- 00:08:59 clearly visible and that is why the
- 00:09:02 reactions router is really great and
- 00:09:05 powerful and I can only like you to play
- 00:09:08 around with it create more complex
- 00:09:10 routes and learn more about it if you
- 00:09:13 need some more help or want to dive into
- 00:09:16 more advanced content concepts then the
- 00:09:18 place to go is the react.js router
- 00:09:21 github page and there you will find some
- 00:09:24 documentation click on tutorial here and
- 00:09:27 that on lessons to see all kinds of
- 00:09:31 different lessons where you couldn't
- 00:09:32 dive into the router much deeper than I
- 00:09:35 did here but you should have all the
- 00:09:38 basics you need by now and with that I
- 00:09:41 think it's time to get started with the
- 00:09:43 redux serious next hopefully see you
- 00:09:45 there bye
