1 00:00:01,140 --> 00:00:02,910 ‫So now that we understand 2 00:00:02,910 --> 00:00:05,760 ‫the fundamentals of styled components, 3 00:00:05,760 --> 00:00:09,180 ‫it's time to finally install React Router 4 00:00:09,180 --> 00:00:11,553 ‫and set up our routes. 5 00:00:15,000 --> 00:00:18,090 ‫So let's open up our terminal here 6 00:00:18,090 --> 00:00:21,870 ‫and then NPM install, React Router. 7 00:00:21,870 --> 00:00:24,570 ‫And don't forget the dom here at the end. 8 00:00:24,570 --> 00:00:28,582 ‫And then please go ahead and install version six. 9 00:00:28,582 --> 00:00:31,440 ‫So again, so that your app works 10 00:00:31,440 --> 00:00:33,903 ‫in the exact same way as mine. 11 00:00:34,950 --> 00:00:39,950 ‫And so let's now actually delete everything from here. 12 00:00:39,990 --> 00:00:43,200 ‫So we built already this nice looking EUI 13 00:00:43,200 --> 00:00:47,850 ‫but now we will just delete it all and start from scratch. 14 00:00:47,850 --> 00:00:51,180 ‫But of course we will still need all the components 15 00:00:51,180 --> 00:00:53,010 ‫that we just built. 16 00:00:53,010 --> 00:00:57,420 ‫But anyway, now it's time to set up our routes. 17 00:00:57,420 --> 00:00:58,890 ‫And in this application 18 00:00:58,890 --> 00:01:01,740 ‫we will not use the data loading features 19 00:01:01,740 --> 00:01:05,670 ‫of React Router that we used in the previous project. 20 00:01:05,670 --> 00:01:09,270 ‫And so therefore, we can go back to setting up all routes 21 00:01:09,270 --> 00:01:13,530 ‫in the way that we did it in the world wise application. 22 00:01:13,530 --> 00:01:16,260 ‫So basically in a declarative way. 23 00:01:16,260 --> 00:01:21,260 ‫And so for that, let's do it right here in a JSX. 24 00:01:22,740 --> 00:01:27,740 ‫So we start with the browser router component 25 00:01:28,530 --> 00:01:32,850 ‫and then in there we specify the routes component 26 00:01:32,850 --> 00:01:34,740 ‫which is the one that actually figures 27 00:01:34,740 --> 00:01:37,842 ‫out which route matches the URL. 28 00:01:37,842 --> 00:01:39,705 ‫And then for each route 29 00:01:39,705 --> 00:01:44,370 ‫we will again have one route element. 30 00:01:44,370 --> 00:01:47,400 ‫And so these are self-closing elements 31 00:01:47,400 --> 00:01:49,143 ‫unless they have child routes. 32 00:01:50,130 --> 00:01:53,850 ‫And then here we can just define the path. 33 00:01:53,850 --> 00:01:58,823 ‫So let's start with the dashboard, not like this. 34 00:02:01,860 --> 00:02:05,776 ‫And actually we already have all of our pages 35 00:02:05,776 --> 00:02:09,633 ‫or at least most of them right here in the pages folder. 36 00:02:10,830 --> 00:02:15,423 ‫So apparently we didn't import these components here. 37 00:02:17,391 --> 00:02:19,170 ‫All right. 38 00:02:19,170 --> 00:02:21,930 ‫And so here, let's then define 39 00:02:21,930 --> 00:02:25,560 ‫or let's use the dashboard page that we have 40 00:02:25,560 --> 00:02:27,093 ‫in our pages folder. 41 00:02:28,770 --> 00:02:33,153 ‫So dashboard, and then let's manually import that. 42 00:02:40,020 --> 00:02:43,413 ‫So pages and dashboards. 43 00:02:44,910 --> 00:02:45,930 ‫All right. 44 00:02:45,930 --> 00:02:49,230 ‫And since we already know well enough how this work 45 00:02:49,230 --> 00:02:51,600 ‫I will just duplicate this here a few times 46 00:02:51,600 --> 00:02:55,113 ‫and just do it for all of the pages really fast. 47 00:03:03,630 --> 00:03:06,090 ‫Now okay, so just make sure 48 00:03:06,090 --> 00:03:10,470 ‫that your routes are exactly the same ones as I have here. 49 00:03:10,470 --> 00:03:12,540 ‫And so then the result should be 50 00:03:12,540 --> 00:03:16,110 ‫that after you have everything set up, the result is 51 00:03:16,110 --> 00:03:19,470 ‫that the page you're looking for could not be found. 52 00:03:19,470 --> 00:03:22,650 ‫And so that's this last route right here 53 00:03:22,650 --> 00:03:24,930 ‫which will be matched if none of 54 00:03:24,930 --> 00:03:27,393 ‫these other URLs here can be matched. 55 00:03:28,440 --> 00:03:29,940 ‫And the reason for that is 56 00:03:29,940 --> 00:03:33,900 ‫that we actually don't have like an index route. 57 00:03:33,900 --> 00:03:37,050 ‫And so let's change that. 58 00:03:37,050 --> 00:03:39,510 ‫So let's duplicate this first one right here 59 00:03:39,510 --> 00:03:41,897 ‫because this is what we want to see 60 00:03:41,897 --> 00:03:44,673 ‫as soon as we open up the app. 61 00:03:45,600 --> 00:03:47,910 ‫So this should be our index route. 62 00:03:47,910 --> 00:03:52,530 ‫And so let's actually do that using the index prop. 63 00:03:52,530 --> 00:03:57,530 ‫And so then indeed, we see our dashboards nice. 64 00:03:57,900 --> 00:04:01,530 ‫However, here we have now this duplicate code. 65 00:04:01,530 --> 00:04:06,361 ‫And so usually what we do is a declarative redirect. 66 00:04:06,361 --> 00:04:11,361 ‫So for that, we use the navigate component provided 67 00:04:13,440 --> 00:04:18,440 ‫by React Router, then replace so that the URL 68 00:04:18,600 --> 00:04:20,967 ‫gets replaced in the history stack. 69 00:04:20,967 --> 00:04:24,093 ‫And then here, just the route again. 70 00:04:26,250 --> 00:04:30,400 ‫So this is a little bit cleaner, and the result is the same 71 00:04:31,530 --> 00:04:33,420 ‫well, not in the URL. 72 00:04:33,420 --> 00:04:37,110 ‫So now if we open up this page, it'll automatically 73 00:04:37,110 --> 00:04:40,503 ‫immediately redirect us to the dashboard. 74 00:04:43,770 --> 00:04:47,700 ‫Okay, and now finally, as you might be seeing 75 00:04:47,700 --> 00:04:50,010 ‫we are again missing our styles. 76 00:04:50,010 --> 00:04:52,023 ‫And so let's bring them back here. 77 00:04:53,700 --> 00:04:58,217 ‫So importing this component called global styles. 78 00:05:01,380 --> 00:05:03,790 ‫So let's import that here at the very top 79 00:05:14,250 --> 00:05:19,250 ‫Styles and then global styles like this. 80 00:05:20,580 --> 00:05:23,280 ‫Ah, but of course then we need again, 81 00:05:23,280 --> 00:05:24,640 ‫that fragment 82 00:05:27,210 --> 00:05:29,130 ‫because as you already know, 83 00:05:29,130 --> 00:05:31,468 ‫each React component can only return 84 00:05:31,468 --> 00:05:34,980 ‫exactly one element or one component. 85 00:05:34,980 --> 00:05:37,770 ‫And so that's now this fragment right here. 86 00:05:37,770 --> 00:05:40,710 ‫And then our styles are back. 87 00:05:40,710 --> 00:05:44,223 ‫Let's reload and let's test out some of the pages here. 88 00:05:45,270 --> 00:05:47,343 ‫For example, the bookings page. 89 00:05:48,300 --> 00:05:51,850 ‫And as you see, here we are actually already 90 00:05:53,345 --> 00:05:54,870 ‫using the heading that we created earlier 91 00:05:54,870 --> 00:05:57,003 ‫and also the row component. 92 00:06:00,180 --> 00:06:04,380 ‫Let's also check out the account, for example. 93 00:06:04,380 --> 00:06:09,380 ‫And so here again, we are using that row quite a bit. 94 00:06:12,150 --> 00:06:13,410 ‫Great. 95 00:06:13,410 --> 00:06:17,400 ‫And so we are done with setting up our routes. 96 00:06:17,400 --> 00:06:19,740 ‫And so let's move on to the next lecture 97 00:06:19,740 --> 00:06:22,080 ‫where we will then as always 98 00:06:22,080 --> 00:06:24,243 ‫build the applications layout.