- 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