Coding

ReactJS Basics – #16 React Router – Navigation & Parameters

  • 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