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

You may also like