Coding

ReactJS Basics – #15 React Router – Route Setup

  • 00:00:00 welcome to a new video we learned a lot
  • 00:00:03 about
  • 00:00:04 react.js in the last couple of videos at
  • 00:00:07 least I hope so
  • 00:00:08 and there is one thing where we haven't
  • 00:00:11 really dived into deeper I'm not talking
  • 00:00:14 about Redux that will be the next series
  • 00:00:16 i have upcoming on this channel but I'm
  • 00:00:19 talking about routing if we want to
  • 00:00:22 build a single page application with
  • 00:00:24 react chairs we need a router right
  • 00:00:26 because then we want to have all the
  • 00:00:29 page changes all URLs entered by the
  • 00:00:33 user or created by clicking a link we
  • 00:00:36 want to handle all these paths all these
  • 00:00:39 routes with reaction yes and not with
  • 00:00:41 our server right therefore we need a
  • 00:00:44 router to be able to load pages
  • 00:00:46 depending on the URL and reactions
  • 00:00:51 actually has a router or there is a
  • 00:00:54 router package available for reactions
  • 00:00:57 it's called react router so in this
  • 00:01:01 video the goal is to add this router and
  • 00:01:05 to implement basic navigation with you
  • 00:01:07 react router so let's start in my
  • 00:01:11 workspace here I will install the
  • 00:01:13 reactor out room and I do this by
  • 00:01:15 running NPM install – – safe and then
  • 00:01:19 the react router just like that that
  • 00:01:23 will download do you react router and
  • 00:01:26 install it as a production dependency
  • 00:01:29 therefore a new package JSON file we
  • 00:01:32 should see the react react router here
  • 00:01:34 with that installed you see well I get a
  • 00:01:37 couple of files already in this project
  • 00:01:40 and of course you can find the finished
  • 00:01:43 source code available in the video
  • 00:01:44 description and yes you would need to
  • 00:01:47 strip out all the router related code to
  • 00:01:50 be me well same position as I am here
  • 00:01:53 right now but basically all these files
  • 00:01:57 here are very very simple and
  • 00:02:00 if we have a look at the index touch as
  • 00:02:02 file you see that I'm loading some route
  • 00:02:04 component and that I pass an average
  • 00:02:07 component as a child to the route
  • 00:02:09 component so let's have a look at the
  • 00:02:12 route component first the route
  • 00:02:14 component is basically chest component
  • 00:02:17 which uses seven bootstrap classes or D
  • 00:02:19 bootstrap grid and implements a header
  • 00:02:21 and then whatever I pass as a children
  • 00:02:24 or as child excuse me so in this case
  • 00:02:26 and passing the home component as a
  • 00:02:28 child
  • 00:02:29 therefore the home component will be
  • 00:02:31 rendered in this place now what is the
  • 00:02:34 home component what that is a component
  • 00:02:36 which only says hope wrapped in a div
  • 00:02:39 and the hatter component which you can
  • 00:02:43 also see the route component all the
  • 00:02:45 header component is a very basic
  • 00:02:47 bootstrap or very basic navigation bar
  • 00:02:51 using bootstrap classes so it has this
  • 00:02:54 nav element with sub-woofer classes and
  • 00:02:57 then it has two links which you won't
  • 00:02:59 work as of now and then finally the user
  • 00:03:03 dot Kaos file the user component here
  • 00:03:06 that's a common component we're
  • 00:03:07 currently not using but we will use it
  • 00:03:09 in with route later on well that only
  • 00:03:13 says the user page and then I want to be
  • 00:03:15 able to output some parameters here a
  • 00:03:18 parameter passed with the router so
  • 00:03:21 that's just some basic setup for our
  • 00:03:24 basic routing video here so let's start
  • 00:03:27 the first step is to set up the router
  • 00:03:30 in the index.js file so in the route
  • 00:03:33 component of our whole application in
  • 00:03:35 the app component in this case here in
  • 00:03:38 order to use the react router here I
  • 00:03:41 need to import it I need to import some
  • 00:03:43 packages from it let me just change this
  • 00:03:47 to be
  • 00:03:49 double quotation marks to stay
  • 00:03:51 consistent so here I want to import
  • 00:03:54 react router and then the question is
  • 00:03:57 what do I want to import from the
  • 00:03:59 reactor outer here right well I want to
  • 00:04:02 import the router and I will also need
  • 00:04:07 some routes and I will need a couple of
  • 00:04:10 other import to which I'll come back
  • 00:04:11 soon with these two imports added what I
  • 00:04:15 can do is I can delete this code here
  • 00:04:19 for now and instead I want to return the
  • 00:04:22 router and the cool thing about the
  • 00:04:25 reactions router is you can set it up
  • 00:04:27 just like these this just like well HTML
  • 00:04:31 elements are just like components you
  • 00:04:33 could also set it up in a config file
  • 00:04:36 and write it in a kind of array way but
  • 00:04:39 that I think is the most visual and well
  • 00:04:44 easy way to create the routing so I set
  • 00:04:47 up the router here and then between the
  • 00:04:50 opening and closing tag of the overall
  • 00:04:52 router we define our routes just like
  • 00:04:56 that now that would be a route now the
  • 00:04:59 questions which route should this
  • 00:05:01 application half and we could say that
  • 00:05:04 we want a user out at a home route and
  • 00:05:07 actually I can use a self closing tag
  • 00:05:11 here so let's create such a route and we
  • 00:05:15 do this by adding the path attribute to
  • 00:05:17 a route that says which URL do you want
  • 00:05:21 to handle with this route at the URL I
  • 00:05:24 do want to handle and we use single
  • 00:05:26 calling braces for that is d let's say
  • 00:05:31 user that would be slash user at the end
  • 00:05:34 of your URL and then I duplicate this to
  • 00:05:37 also Hamel slash home let's say and yes
  • 00:05:41 you could leave out the single calling
  • 00:05:45 braces here since we have a string but I
  • 00:05:46 like to stay well consistent here and
  • 00:05:48 always use them so with that we have two
  • 00:05:52 routes one would be localhost 8080 slash
  • 00:05:55 user
  • 00:05:56 would be a little gloss 8080 slash home
  • 00:05:59 now we have to pop but we also need to
  • 00:06:02 tell the router
  • 00:06:03 what do you want to do whatever we reach
  • 00:06:05 just route so what component should get
  • 00:06:09 loaded and I want to load the user
  • 00:06:13 component in the case of the slash user
  • 00:06:17 out here and there of course I also need
  • 00:06:19 to import user from components user here
  • 00:06:23 and I want to load the home component
  • 00:06:29 here when navigating to the slash home
  • 00:06:33 path so that's our basic setup with d2
  • 00:06:36 routes and I will change this soon but
  • 00:06:39 for now that is well how it should look
  • 00:06:42 like however there is one other thing I
  • 00:06:45 want to add the way the URL should look
  • 00:06:49 like I just said that I want to have
  • 00:06:51 localhost 8080 and then slash user or
  • 00:06:54 slash home that would be the URL style
  • 00:06:57 you know and you expect which looks
  • 00:06:59 beautiful and so on and that is the
  • 00:07:04 style we use nowadays but a couple of
  • 00:07:07 years ago and that sounds much longer
  • 00:07:10 than it actually is you still see it
  • 00:07:12 today a lot you just use this hashtag
  • 00:07:15 style which means you had a route like
  • 00:07:18 let's say a local loss for example calm
  • 00:07:22 and then you had hash tag and then you
  • 00:07:27 had user for example and the hash tag
  • 00:07:29 here was important for front-end
  • 00:07:33 applications or for single page
  • 00:07:35 applications because it told the server
  • 00:07:37 that the server should only handle this
  • 00:07:40 part of the URL and then the single page
  • 00:07:44 application so your JavaScript code
  • 00:07:46 would handle everything
  • 00:07:48 after the hash tag now why is that
  • 00:07:50 important the reason why that is
  • 00:07:53 important is that what happens whenever
  • 00:07:55 you enter a route in your URL well the
  • 00:07:59 server handles it first right because
  • 00:08:01 the server zone always gets the request
  • 00:08:03 first that's just how the internet works
  • 00:08:05 so if you had a route like that
  • 00:08:08 example the cop / user and your server
  • 00:08:11 doesn't have the drought because most of
  • 00:08:13 the time it wouldn't as your front and
  • 00:08:15 application should handle it it would
  • 00:08:17 give you a 404 error which means doesn't
  • 00:08:21 work don't find route now in recent days
  • 00:08:26 today we have the html5 pushstate which
  • 00:08:31 enables the browser to work with urls
  • 00:08:35 like this and not send requests to the
  • 00:08:38 server if you're already in an
  • 00:08:39 application but if you want to access
  • 00:08:42 such a route from outside of the
  • 00:08:44 application so which means you hard
  • 00:08:47 enter it into the URL bar and wizard it
  • 00:08:50 then you would still send the request to
  • 00:08:52 the server which means your server needs
  • 00:08:54 to be configured in a way that it sends
  • 00:08:56 back the index dot HTML file in a 404
  • 00:09:00 error case because that would then allow
  • 00:09:02 the front and application to pick up on
  • 00:09:05 this route again and handle it so why am
  • 00:09:08 i flatting you with all these strange
  • 00:09:13 explanations about URLs the reason is
  • 00:09:16 because we have to decide which URL
  • 00:09:18 style we want to use on this router we
  • 00:09:20 could use the hash tag style to well be
  • 00:09:24 able to use deep links or hard entered
  • 00:09:27 links in the URL with the hash tag and
  • 00:09:29 don't have to worry about sending you
  • 00:09:31 write error document or we could use the
  • 00:09:36 more beautiful style which we want to
  • 00:09:38 see and which is supported nowadays by
  • 00:09:41 browsers but where we need to make sure
  • 00:09:43 that our server sends the index.html in
  • 00:09:48 a 404 error case I will get with the
  • 00:09:52 latter approach in order to tell the
  • 00:09:54 reactions router that our URLs will look
  • 00:09:58 like this with just a slash and no hash
  • 00:10:00 tag I need to import browse history
  • 00:10:05 browser history year and then on my
  • 00:10:07 router I set history equal to browser
  • 00:10:11 history now this name might sound
  • 00:10:14 strange but keep in mind this is
  • 00:10:16 important for the browser
  • 00:10:18 basically tells browser or business
  • 00:10:21 chest a feature supported with html5 and
  • 00:10:23 by modern browsers that be well then
  • 00:10:27 when were inside of the app which means
  • 00:10:29 you click a link link in our app the
  • 00:10:31 browser handles this correctly and stays
  • 00:10:33 in our app and doesn't reach out to the
  • 00:10:35 server so therefore we tell the browser
  • 00:10:38 how to manage history if you the history
  • 00:10:42 of routes or of URLs if you want to see
  • 00:10:45 it like this so long story short we add
  • 00:10:48 this to get the beautiful localhost /
  • 00:10:51 something URLs and if I save this the
  • 00:10:57 question is what would we expect to see
  • 00:11:00 I got my web pack server running already
  • 00:11:02 and if I go to my application we see
  • 00:11:05 nothing now if I load it we see that the
  • 00:11:09 location slash did not match any routes
  • 00:11:12 so we have to enter slash users for
  • 00:11:15 example right because that is or slash
  • 00:11:19 user excuse me what we set up but then
  • 00:11:22 we get the strange cannot get slash user
  • 00:11:24 here now the reason for that is we get
  • 00:11:29 an 404 error as you can see that our
  • 00:11:32 browser our server excuse me the web
  • 00:11:35 pack def server is not configured to
  • 00:11:38 handle this style it gives us a 404 F
  • 00:11:42 404 error and doesn't send us back to
  • 00:11:45 index dot HTML in such a case remember
  • 00:11:49 that's what I was just talking about the
  • 00:11:51 server has to request first and it needs
  • 00:11:53 to give us back our index.html to let
  • 00:11:56 our front end application handle this
  • 00:11:58 route so we have to tell web pack that
  • 00:12:02 we wanted to behave like this or we have
  • 00:12:04 to tell the web pack server that we
  • 00:12:06 wanted to behave like that we can tell
  • 00:12:09 it by going to the packaged up jason and
  • 00:12:11 here where we in the bold step here
  • 00:12:15 where we launch our server
  • 00:12:18 I'm adding yet another configuration to
  • 00:12:20 it it's called history API fallback and
  • 00:12:25 this sounds strange but it tells the web
  • 00:12:29 pack dev server that we want to use this
  • 00:12:32 browser history
  • 00:12:34 well API remember history that's also
  • 00:12:38 what we saw here browser history
  • 00:12:40 so with the added why then relaunch my
  • 00:12:43 server with NPM start and reload this
  • 00:12:48 page we now see the user page so that is
  • 00:12:53 exactly the component I have here and if
  • 00:12:58 we enter slash home well then we see the
  • 00:13:02 home page so notice that the header is
  • 00:13:04 gone and I will come back to this in a
  • 00:13:06 second but routing works though only if
  • 00:13:10 we entered URLs ourselves at the moment
  • 00:13:13 and I'll just set the header disappears
  • 00:13:16 so let's have a look at both issues or
  • 00:13:20 how we might fix that I want to start
  • 00:13:25 with the disappearing header and the
  • 00:13:29 reason for it is clearly yes well if we
  • 00:13:32 have a look at our a next chance we have
  • 00:13:34 two routes user and home and that just
  • 00:13:38 means load this component but our header
  • 00:13:41 is included in the root component which
  • 00:13:44 is never loaded since no route leads to
  • 00:13:47 the root component we have only routes
  • 00:13:49 to the home component and the user
  • 00:13:51 component so what we need to do instead
  • 00:13:54 is we somehow need to load our root
  • 00:13:58 component and then have sub routes on
  • 00:14:01 that root component where we decide what
  • 00:14:04 should get entered here as children
  • 00:14:06 right so we need to adjust our routing
  • 00:14:10 therefore and keep in mind that is just
  • 00:14:15 one example here you can also have
  • 00:14:18 applications where you have some
  • 00:14:20 like let's say a slash route and then
  • 00:14:23 some other routes but here what I will
  • 00:14:26 do is I will change this to slash indeed
  • 00:14:29 load the root component if we save this
  • 00:14:33 and have a look and go to localhost we
  • 00:14:36 see now we have the header again but
  • 00:14:38 we're nothing loading we're loading
  • 00:14:40 nothing down here because what we only
  • 00:14:43 load the root component so I need to
  • 00:14:46 create some sub routes which defines
  • 00:14:49 what should get loaded inside of this
  • 00:14:52 root component in this children place
  • 00:14:54 and of course you can only have sub
  • 00:14:57 routes so nested routes if you have such
  • 00:15:00 a hook here where you can then render
  • 00:15:02 the sub routes or the components loaded
  • 00:15:06 free sup routes so in this case to
  • 00:15:09 create sub routes you simply change this
  • 00:15:13 from being a self closing tag to have an
  • 00:15:16 opening and a closing tag and then you
  • 00:15:19 nest the routes you want to nest inside
  • 00:15:21 here so when route I want to have is
  • 00:15:24 let's say the user out here cell you
  • 00:15:29 could just say user and that can be a
  • 00:15:33 self closing tag again and then here a
  • 00:15:36 one to load the user component I'm
  • 00:15:38 duplicating this because I also want to
  • 00:15:41 load the home component which would be
  • 00:15:44 home and all these paths here by the way
  • 00:15:47 are appended to this path so in this
  • 00:15:52 case the path is only slash so we will
  • 00:15:54 still only have slash user but if we had
  • 00:15:57 slash route here well then the path to
  • 00:16:01 this route here would be / route slash
  • 00:16:05 user and you could also leave out the
  • 00:16:08 leading slash here but I only want to
  • 00:16:11 have the well root URL just the slash
  • 00:16:14 after localhost and then these two
  • 00:16:17 nested routes here now if I say if this
  • 00:16:20 go back to my application and I enter
  • 00:16:24 slash user not users just user well then
  • 00:16:29 we see we get the head
  • 00:16:30 and we get the user page now load it in
  • 00:16:34 the place of this props children here so
  • 00:16:38 if I even add horizontal lines makes
  • 00:16:42 clearer you see that this gets loaded in
  • 00:16:45 this place where we load the children
  • 00:16:47 and that is what you react router does
  • 00:16:49 automatically for us it finds this hook
  • 00:16:52 and loads the component off to SAP Road
  • 00:16:55 suppress up route in this place notice I
  • 00:16:59 still get home you which would indeed
  • 00:17:01 lead to some problems because if I enter
  • 00:17:04 home here we load home in this place so
  • 00:17:08 we never reach this route here which
  • 00:17:10 would also have the same path of slash
  • 00:17:12 home the reason for this is that we
  • 00:17:15 handle slash home here and the ordering
  • 00:17:18 does matter so here if I had a route
  • 00:17:22 like home single to indicate that this
  • 00:17:26 will not use the route component well
  • 00:17:29 then that would still work but now the
  • 00:17:30 header is of course gone again so with
  • 00:17:34 that you got all the routes set up here
  • 00:17:38 but there are two things I need to
  • 00:17:41 change I want to make these links
  • 00:17:44 working and what happens if we just
  • 00:17:46 navigate to slash well then knows SAP
  • 00:17:50 route is loaded I want to load a default
  • 00:17:53 component in this case some default
  • 00:17:55 route let's say if I navigate to
  • 00:17:58 localhost like this I want to load the
  • 00:18:01 home component just like if I were to
  • 00:18:03 navigate to slash home I'll take care
  • 00:18:06 about this problem first in order to
  • 00:18:09 load such a default route I add a new
  • 00:18:12 route to my slash route here and I need
  • 00:18:17 to import this actually it's called
  • 00:18:19 index route which means this is like an
  • 00:18:22 index page on our server where we always
  • 00:18:25 always load the index of HTML if we
  • 00:18:28 navigate to just slash or just the
  • 00:18:31 public folder well there's a sea route
  • 00:18:33 which will always get loaded if we have
  • 00:18:36 no specific path after the slash in this
  • 00:18:39 case here or whatever
  • 00:18:40 our path of the root component here is
  • 00:18:43 so I will create the index route here
  • 00:18:46 self-closing tag I don't need the path
  • 00:18:50 because again the path will be this path
  • 00:18:52 it's the default route but I will need a
  • 00:18:56 component of course and I want to load
  • 00:18:58 your home component as a default with
  • 00:19:01 that in place if I go back to just
  • 00:19:03 localhost you see we now also get the
  • 00:19:06 home component as we do if I go to slash
  • 00:19:10 home and if I go to slash user well then
  • 00:19:14 we load to user page so that's all where
  • 00:19:17 I can find the missing thing of course
  • 00:19:19 is that it would be nice if these links
  • 00:19:22 your work and thereafter I also want to
  • 00:19:25 have a look at passing and using
  • 00:19:28 parameters so that's what I'll have a
  • 00:19:30 look at next