1 00:00:00,850 --> 00:00:03,890 In the last video we scaffold it out a couple of different components. 2 00:00:03,890 --> 00:00:09,050 And so now we want to make sure that we hook them all out to different routes to be shown inside of 3 00:00:09,050 --> 00:00:10,170 our app. 4 00:00:10,200 --> 00:00:16,070 JS file now the first thing we do is do a little bit of cleanup inside of your site and going to delete 5 00:00:16,100 --> 00:00:19,410 the existing page one and Page two components. 6 00:00:19,430 --> 00:00:20,290 So here's page 1. 7 00:00:20,300 --> 00:00:21,280 I'm going to delete it. 8 00:00:21,380 --> 00:00:22,650 And here's page two. 9 00:00:22,670 --> 00:00:24,230 I'm going to delete it as well. 10 00:00:26,500 --> 00:00:32,990 And then I'm going to delete the two route definitions that we have for each of those. 11 00:00:33,070 --> 00:00:37,620 Then at the top I'm going to add on import statements for each the different files we just created. 12 00:00:37,690 --> 00:00:47,450 So I going to add in five imports in total so I'm going to do stream create from streams stream create 13 00:00:48,840 --> 00:00:52,760 and then I'll copy paste that down four times just to save a little bit of time. 14 00:00:53,160 --> 00:01:08,200 So next I'll do stream edit or do stream delete stream lists and stream show like so. 15 00:01:08,240 --> 00:01:13,520 So I should see create edit delete list show and on the right hand side to create edit delete list show 16 00:01:14,860 --> 00:01:17,310 it's now we can create separate routes for each of these. 17 00:01:17,330 --> 00:01:18,470 So inside that div 18 00:01:21,760 --> 00:01:27,740 I'll add on a route I'll give this first one a path of four it's slash. 19 00:01:27,790 --> 00:01:32,410 Remember we had said that whenever a user goes to the route I want to show the stream list component. 20 00:01:32,670 --> 00:01:34,390 So let's say patho for its slash. 21 00:01:34,390 --> 00:01:40,410 I'm going to use the exact keyword so I do not accidently match one of these other routes and I'll say 22 00:01:40,410 --> 00:01:45,790 my component is going to be stream list and I'll close the route off. 23 00:01:47,430 --> 00:01:49,850 So I'll copy this one down for the next one. 24 00:01:49,850 --> 00:01:50,490 I will do. 25 00:01:50,490 --> 00:01:54,280 How about let's just go by this diagram right here so I'll do stream create next. 26 00:01:54,330 --> 00:01:57,530 I want to have a path of slash streams slash new. 27 00:01:57,780 --> 00:02:02,900 So I'll do streams slash new and I'm going to collapse my site barges so we can see the entire line 28 00:02:03,360 --> 00:02:06,650 so do stream create. 29 00:02:06,670 --> 00:02:15,330 Next up I want to do streams so do streams at it now will be stream edit as my component next I'm going 30 00:02:15,330 --> 00:02:16,470 to do streams delete 31 00:02:19,190 --> 00:02:24,730 and I'll do streams or stream delete. 32 00:02:24,940 --> 00:02:31,570 And then finally I'll do streams show. 33 00:02:31,690 --> 00:02:32,560 All right so that's it. 34 00:02:32,570 --> 00:02:35,390 I guess I have my five route definitions right here. 35 00:02:35,540 --> 00:02:39,740 So double check your paths on each one and double check your component names as well. 36 00:02:39,740 --> 00:02:43,590 Make sure that you did not accidentally put in a s after the word stream. 37 00:02:43,590 --> 00:02:46,360 Inside of all the component names. 38 00:02:46,450 --> 00:02:50,200 So once you've got that all put together we will save this file and then we will test it out inside 39 00:02:50,200 --> 00:02:51,460 the browser. 40 00:02:51,460 --> 00:02:55,520 Now when you flip over to your browser it is incredibly possible that you might have made a typo. 41 00:02:55,540 --> 00:02:57,480 And so you might see an error message over here. 42 00:02:57,610 --> 00:03:01,820 If you see an error message at this point please read the error message very closely. 43 00:03:01,840 --> 00:03:04,410 It will tell you exactly what you did wrong. 44 00:03:04,420 --> 00:03:09,140 Chances are you accidentally imported something incorrectly or you might've misspelled a variable name. 45 00:03:09,220 --> 00:03:14,170 At any rate I can just about guarantee you that you have a small typo at someplace inside of your code. 46 00:03:14,170 --> 00:03:18,610 If you are seeing an error message very quickly we're going to test out all these different routes that 47 00:03:18,610 --> 00:03:24,050 we have added into our application so I get to first go to localhost three thousand and I should see 48 00:03:24,050 --> 00:03:25,790 stream list next. 49 00:03:25,790 --> 00:03:29,400 I can go to three thousand streams. 50 00:03:29,430 --> 00:03:35,180 Slash knew I should see stream create or go to 3000 slash streams slash at it. 51 00:03:35,280 --> 00:03:37,200 I should see stream at it. 52 00:03:37,380 --> 00:03:43,440 I should be able to go to show c streams show and finally Asheville to go to streams slash delete and 53 00:03:43,440 --> 00:03:44,810 see stream delete. 54 00:03:44,820 --> 00:03:47,950 So that's all five of them tested in very quick succession. 55 00:03:48,780 --> 00:03:49,140 All right. 56 00:03:49,140 --> 00:03:53,580 So like I said we just went through this little scaffolding process to save us time because otherwise 57 00:03:53,580 --> 00:03:56,370 there would have been like 5 sections in the future. 58 00:03:56,370 --> 00:04:00,960 I said OK let's create a new route definition right and that would have been got that would be tiring 59 00:04:01,020 --> 00:04:02,650 really quickly without a doubt. 60 00:04:02,880 --> 00:04:06,420 So now that we've got all of our routes put together let's take a quick Faas right here and we will 61 00:04:06,420 --> 00:04:07,940 continue in the next video.