1 00:00:01,140 --> 00:00:03,540 ‫Now it's time to finally go back 2 00:00:03,540 --> 00:00:08,540 ‫to React Router and to a new way of implementing routes. 3 00:00:10,470 --> 00:00:15,470 ‫So React version 6.4 introduced a whole new way 4 00:00:15,660 --> 00:00:20,660 ‫of defining routes and of working with React Router. 5 00:00:20,940 --> 00:00:24,900 ‫So from now on we can use some powerful mechanisms 6 00:00:24,900 --> 00:00:28,170 ‫inside React Router for fetching data 7 00:00:28,170 --> 00:00:32,460 ‫into pages and for submitting data using forms, 8 00:00:32,460 --> 00:00:35,490 ‫so all within React Router. 9 00:00:35,490 --> 00:00:38,820 ‫Now, to enable this, we need to define our routes, 10 00:00:38,820 --> 00:00:40,710 ‫as I just said in the beginning, 11 00:00:40,710 --> 00:00:43,170 ‫in a completely different way. 12 00:00:43,170 --> 00:00:45,720 ‫And so to show you how it works, 13 00:00:45,720 --> 00:00:48,813 ‫let's start by installing React Router. 14 00:00:49,830 --> 00:00:52,200 ‫So opening up a new terminal, 15 00:00:52,200 --> 00:00:57,200 ‫let's do npm install react router dom. 16 00:00:58,260 --> 00:01:02,403 ‫And then here it's important that you do version 6. 17 00:01:03,840 --> 00:01:06,720 ‫All right, and while this is installing, 18 00:01:06,720 --> 00:01:10,803 ‫let's open up actually the React Router documentation. 19 00:01:12,180 --> 00:01:15,840 ‫So once you start working with these professional 20 00:01:15,840 --> 00:01:18,120 ‫React development libraries, 21 00:01:18,120 --> 00:01:21,840 ‫it's very important that you start getting into the habit 22 00:01:21,840 --> 00:01:25,830 ‫of always working with the documentation. 23 00:01:25,830 --> 00:01:28,140 ‫And so React Router is, of course, 24 00:01:28,140 --> 00:01:32,733 ‫one of those third-party libraries that we use all the time. 25 00:01:33,630 --> 00:01:35,700 ‫So first off, here in this case, 26 00:01:35,700 --> 00:01:40,440 ‫you can select the current version appear in the selector, 27 00:01:40,440 --> 00:01:43,260 ‫and then here we have the navigation. 28 00:01:43,260 --> 00:01:45,870 ‫And so the function that I just mentioned 29 00:01:45,870 --> 00:01:48,390 ‫we are going to need is this one, 30 00:01:48,390 --> 00:01:49,540 ‫so createBrowserRouter. 31 00:01:50,850 --> 00:01:53,100 ‫And so if you want, you can then check out 32 00:01:53,100 --> 00:01:56,670 ‫the documentation here for this function. 33 00:01:56,670 --> 00:02:00,210 ‫Or you can also here learn first 34 00:02:00,210 --> 00:02:02,640 ‫how to actually pick a router. 35 00:02:02,640 --> 00:02:06,330 ‫But I would say if you want to work with data fetching 36 00:02:06,330 --> 00:02:10,443 ‫in React Router, you are most likely going to need this one. 37 00:02:12,060 --> 00:02:16,560 ‫Okay, so let's actually use that function 38 00:02:16,560 --> 00:02:18,483 ‫outside the component here, 39 00:02:19,650 --> 00:02:21,710 ‫so createBrowserRouter. 40 00:02:23,370 --> 00:02:25,200 ‫And so now that got, of course, 41 00:02:25,200 --> 00:02:28,320 ‫imported from react router dom. 42 00:02:28,320 --> 00:02:32,700 ‫And so this is a function now where we define all routes, 43 00:02:32,700 --> 00:02:36,600 ‫and we do that by passing in an array of objects 44 00:02:36,600 --> 00:02:40,020 ‫where each object is one route. 45 00:02:40,020 --> 00:02:43,050 ‫So let's start here with the Homepage. 46 00:02:43,050 --> 00:02:46,080 ‫And so we define the path property. 47 00:02:46,080 --> 00:02:49,380 ‫And so let's set it here to the root path, 48 00:02:49,380 --> 00:02:52,053 ‫and then here we define the element. 49 00:02:53,100 --> 00:02:56,880 ‫So here now we want to use this Home component here 50 00:02:56,880 --> 00:02:58,143 ‫as the Homepage. 51 00:03:01,230 --> 00:03:03,000 ‫So let's place this here, 52 00:03:03,000 --> 00:03:05,470 ‫and then we need to also import this 53 00:03:09,120 --> 00:03:10,500 ‫like this. 54 00:03:10,500 --> 00:03:13,053 ‫So import Home from, 55 00:03:15,420 --> 00:03:19,233 ‫and then it's inside ui and inside Home. 56 00:03:21,030 --> 00:03:22,980 ‫Now, for now, nothing changed here 57 00:03:22,980 --> 00:03:27,000 ‫because we haven't actually used the results of this yet. 58 00:03:27,000 --> 00:03:30,273 ‫But before we do that, let's just add another one here. 59 00:03:32,370 --> 00:03:34,113 ‫So let's now add the menu. 60 00:03:35,250 --> 00:03:37,080 ‫And so this path here is basically 61 00:03:37,080 --> 00:03:39,480 ‫exactly the same as before. 62 00:03:39,480 --> 00:03:41,520 ‫So in the other, let's say, 63 00:03:41,520 --> 00:03:45,150 ‫more traditional way of defining routes. 64 00:03:45,150 --> 00:03:49,290 ‫And so here we will want the menu component 65 00:03:49,290 --> 00:03:50,463 ‫that is right here. 66 00:03:53,850 --> 00:03:54,683 ‫So... 67 00:03:58,920 --> 00:04:01,858 ‫So menu, and for some reason here 68 00:04:01,858 --> 00:04:04,203 ‫the automatic imports are not working now. 69 00:04:05,970 --> 00:04:10,970 ‫So here that's inside features menu and then dash Menu. 70 00:04:13,470 --> 00:04:16,383 ‫And it's also called Menu, of course. 71 00:04:17,940 --> 00:04:21,090 ‫So with this, we have created our browser router, 72 00:04:21,090 --> 00:04:25,530 ‫but we are actually not doing anything with it yet. 73 00:04:25,530 --> 00:04:30,530 ‫So let's start by saving the result of calling this function 74 00:04:30,780 --> 00:04:33,750 ‫into a variable called Router. 75 00:04:33,750 --> 00:04:36,840 ‫And then here inside our application, 76 00:04:36,840 --> 00:04:39,123 ‫let's now then place this router. 77 00:04:39,990 --> 00:04:43,260 ‫And so let's return, and then here, again, 78 00:04:43,260 --> 00:04:47,243 ‫a new component which is called RouterProvider. 79 00:04:48,990 --> 00:04:50,640 ‫So this one right here. 80 00:04:50,640 --> 00:04:53,130 ‫And so then this one takes a prop 81 00:04:53,130 --> 00:04:58,023 ‫where we pass in that router that we just created. 82 00:04:58,860 --> 00:05:01,320 ‫And so there it is. 83 00:05:01,320 --> 00:05:03,360 ‫So this is now our Homepage. 84 00:05:03,360 --> 00:05:05,610 ‫And so this text that you see there 85 00:05:05,610 --> 00:05:10,233 ‫is exactly what we have here inside the Home component. 86 00:05:11,670 --> 00:05:16,670 ‫Let's try to go to /menu, and indeed there is our menu. 87 00:05:17,880 --> 00:05:21,690 ‫And so our new router is now working. 88 00:05:21,690 --> 00:05:24,960 ‫Now I just want to quickly compare the way that this looks 89 00:05:24,960 --> 00:05:27,210 ‫with the more traditional approach. 90 00:05:27,210 --> 00:05:31,230 ‫So let's come back here to our WorldWise application 91 00:05:31,230 --> 00:05:36,230 ‫and then the App.js file, let's open it inside VS Code. 92 00:05:39,960 --> 00:05:42,870 ‫So remember that here we declare routes 93 00:05:42,870 --> 00:05:44,850 ‫in this declarative way. 94 00:05:44,850 --> 00:05:49,020 ‫So we use the really the BrowserRouter component 95 00:05:49,020 --> 00:05:53,640 ‫and Routes and Route where we then define the path itself 96 00:05:53,640 --> 00:05:54,843 ‫as a prop. 97 00:05:55,740 --> 00:05:59,760 ‫So here we are doing it more in an imperative way. 98 00:05:59,760 --> 00:06:03,450 ‫So we're declaring the router outside of the JSX 99 00:06:03,450 --> 00:06:07,080 ‫and using this JavaScript array right here. 100 00:06:07,080 --> 00:06:10,710 ‫And this is necessary in React Router 6.4 101 00:06:10,710 --> 00:06:13,350 ‫in order to enable data fetching 102 00:06:13,350 --> 00:06:16,263 ‫or data loading with React Router. 103 00:06:17,310 --> 00:06:20,310 ‫So this old way still works 104 00:06:20,310 --> 00:06:22,680 ‫even in the modern React Router, 105 00:06:22,680 --> 00:06:26,100 ‫but then we cannot use it to load data 106 00:06:26,100 --> 00:06:28,890 ‫or to submit data using forms. 107 00:06:28,890 --> 00:06:31,740 ‫So all these new data loading capabilities 108 00:06:31,740 --> 00:06:35,970 ‫are enabled and are only possible to use when we create 109 00:06:35,970 --> 00:06:39,903 ‫a router using this createBrowserRouter function. 110 00:06:41,130 --> 00:06:44,760 ‫Alright, but anyway, let's keep going here, 111 00:06:44,760 --> 00:06:48,540 ‫and let's basically create all our routes, 112 00:06:48,540 --> 00:06:51,960 ‫so all the pages that we talked about 113 00:06:51,960 --> 00:06:53,463 ‫in the planning lecture. 114 00:06:54,660 --> 00:06:59,660 ‫So here the element is going to be this cart page. 115 00:07:01,110 --> 00:07:05,040 ‫And then our other pages will be to create an order 116 00:07:05,040 --> 00:07:08,280 ‫and to fetch data about an existing order. 117 00:07:08,280 --> 00:07:11,790 ‫So again, just like we planned before 118 00:07:11,790 --> 00:07:15,213 ‫in one of the first lectures of this section. 119 00:07:17,280 --> 00:07:20,070 ‫So now we are just putting that into practice here 120 00:07:20,070 --> 00:07:22,203 ‫and writing it into our code. 121 00:07:26,250 --> 00:07:31,250 ‫Okay, so let's actually immediately import 122 00:07:31,350 --> 00:07:33,183 ‫all of those components here. 123 00:07:34,950 --> 00:07:39,123 ‫So features, cart, and then Cart. 124 00:07:42,840 --> 00:07:45,850 ‫Then here CreateOrder 125 00:07:46,980 --> 00:07:51,980 ‫from features, order, CreateOrder. 126 00:07:54,510 --> 00:07:58,863 ‫And then here, let's do the same for the Order. 127 00:08:00,870 --> 00:08:01,713 ‫Okay. 128 00:08:04,530 --> 00:08:06,513 ‫So another path. 129 00:08:09,420 --> 00:08:13,530 ‫And here let's remember we decided to create this route, 130 00:08:13,530 --> 00:08:18,530 ‫so /order/new to create a new order. 131 00:08:20,550 --> 00:08:21,573 ‫So CreateOrder. 132 00:08:25,350 --> 00:08:29,490 ‫And finally we also had the path 133 00:08:29,490 --> 00:08:32,700 ‫to check out an existing order. 134 00:08:32,700 --> 00:08:34,110 ‫And so that's order. 135 00:08:34,110 --> 00:08:36,930 ‫And then here we can, just like before, 136 00:08:36,930 --> 00:08:41,403 ‫define params with this colon and then the param name. 137 00:08:42,420 --> 00:08:44,103 ‫So that's just orderId. 138 00:08:45,090 --> 00:08:49,743 ‫And then here the element is just the Order. 139 00:08:51,420 --> 00:08:55,110 ‫And so since we don't have any links between the pages yet, 140 00:08:55,110 --> 00:08:59,310 ‫I will just manually try this here. 141 00:08:59,310 --> 00:09:00,960 ‫So here we have the cart. 142 00:09:00,960 --> 00:09:03,690 ‫Here actually there is a link, so which brings us back 143 00:09:03,690 --> 00:09:07,110 ‫to the menu, and beautiful. 144 00:09:07,110 --> 00:09:12,110 ‫That works. Then here, let's do order/new. 145 00:09:12,420 --> 00:09:14,400 ‫So here we have to order form. 146 00:09:14,400 --> 00:09:17,580 ‫And then here we can also pass in that orderId. 147 00:09:17,580 --> 00:09:20,850 ‫So this one probably doesn't work yet, 148 00:09:20,850 --> 00:09:23,190 ‫and so we get this error here. 149 00:09:23,190 --> 00:09:25,713 ‫But we will take care of that a bit later. 150 00:09:27,210 --> 00:09:31,770 ‫So notice how in debt new router that we just created, 151 00:09:31,770 --> 00:09:35,460 ‫we didn't do one path here as a fallback, 152 00:09:35,460 --> 00:09:37,680 ‫so this path with this star 153 00:09:37,680 --> 00:09:40,230 ‫where we then used PageNotFound. 154 00:09:40,230 --> 00:09:42,750 ‫So again, here we don't need to do that 155 00:09:42,750 --> 00:09:46,320 ‫because we will have a special way of handling errors, 156 00:09:46,320 --> 00:09:50,460 ‫so for example, when a certain page is not found. 157 00:09:50,460 --> 00:09:55,140 ‫Okay so just to recap, in the new React Router, 158 00:09:55,140 --> 00:10:00,140 ‫since version 6.4, if we want to use the new powerful APIs 159 00:10:00,240 --> 00:10:04,410 ‫like data loaders, data actions, or data features, 160 00:10:04,410 --> 00:10:09,410 ‫we need to create a new router using this new syntax. 161 00:10:09,540 --> 00:10:11,850 ‫So specifying an array of objects 162 00:10:11,850 --> 00:10:14,670 ‫where each object is now the route, 163 00:10:14,670 --> 00:10:18,480 ‫so a correspondence between a path and the component 164 00:10:18,480 --> 00:10:21,570 ‫that we want to display in the user interface. 165 00:10:21,570 --> 00:10:24,660 ‫And we then provide that router object here 166 00:10:24,660 --> 00:10:27,183 ‫using the RouterProvider component.