1 00:00:01,620 --> 00:00:07,290 In the last section we discuss the purpose of re-act router remember react rather comes bundled along 2 00:00:07,290 --> 00:00:09,490 with a separate package called history. 3 00:00:09,630 --> 00:00:15,360 History is what interacts with the are L and then it passes updates to the URL on to react or outer 4 00:00:15,870 --> 00:00:21,020 react rather than takes you or L and decides what components react needs to show based on that you are 5 00:00:21,020 --> 00:00:21,690 l. 6 00:00:22,050 --> 00:00:25,320 So in this section we're going to continue wiring up re-act router. 7 00:00:25,620 --> 00:00:30,180 I got my terminal open here and I mean my root project directory. 8 00:00:30,180 --> 00:00:36,760 I'm going to go ahead and make sure we can run our project by running and PM run star. 9 00:00:36,810 --> 00:00:42,280 Are you going to do NPM start either one so this will spool our server up. 10 00:00:42,330 --> 00:00:46,580 I'm going to open my browser and just make sure I can navigate to it. 11 00:00:47,070 --> 00:00:50,430 Yep I got Riak simple starter appear perfect. 12 00:00:50,940 --> 00:00:57,020 Ok I can open my code editor and I'm going to open inside of my or directory. 13 00:00:57,060 --> 00:01:03,750 The index dot js file or we're going to do here is we're going to wire up re-act router to our application 14 00:01:03,750 --> 00:01:04,120 . 15 00:01:04,260 --> 00:01:09,720 We're going to make sure that re-act router is in charge of deciding what views or what components are 16 00:01:09,720 --> 00:01:11,490 shown on the screen at any given time. 17 00:01:11,520 --> 00:01:18,300 And again it's going to do this based on the R L so to hand over responsibility of routing and rendering 18 00:01:18,300 --> 00:01:19,750 to react router. 19 00:01:20,130 --> 00:01:26,370 We're going to end up replacing our app component or going to replace it with an instance of reac router 20 00:01:26,400 --> 00:01:26,730 . 21 00:01:27,300 --> 00:01:33,860 So at the top of the file I'm going to go ahead and find the line that says import app from components 22 00:01:33,870 --> 00:01:37,040 out and we don't need this line here anymore. 23 00:01:37,040 --> 00:01:43,730 We're going to render app in a separate location so I can go ahead and delete this and instead we're 24 00:01:43,740 --> 00:01:54,840 going to import router and then a another object called browser history from re-act router. 25 00:01:55,830 --> 00:02:00,060 All right and now this is going to look a little bit strange so bear with me here for just a second 26 00:02:00,060 --> 00:02:00,110 . 27 00:02:00,120 --> 00:02:02,590 We're going to write some code and then we'll talk about what's going on. 28 00:02:02,850 --> 00:02:10,620 So I can delete the out call here and we're going to replace it with a router and a property called 29 00:02:10,620 --> 00:02:17,090 History browser history like so. 30 00:02:18,210 --> 00:02:21,520 OK so already you know what's going on here what's happening. 31 00:02:21,810 --> 00:02:28,920 Well we imported two objects at the top router and browser history router is the object that decides 32 00:02:28,920 --> 00:02:32,280 what Riak components we need to render whenever the oil changes. 33 00:02:32,290 --> 00:02:34,950 You know we've discussed that concept several times now. 34 00:02:34,980 --> 00:02:41,190 This is what's actually deciding what to show on the screen browser history is actually a little bit 35 00:02:41,190 --> 00:02:42,530 more interesting. 36 00:02:42,540 --> 00:02:47,770 It's an object that tells re-act router how to interpret changes to the u r l. 37 00:02:48,060 --> 00:02:53,340 In this case we're using browser history but there are two other histories that we can use as well and 38 00:02:53,340 --> 00:02:57,690 keep in mind that this history here is separate from the History Library. 39 00:02:57,690 --> 00:03:05,700 I was talking about previously browser history means that whenever the Ural updates re-act router is 40 00:03:05,700 --> 00:03:10,200 going to interpret everything after the protocol. 41 00:03:10,290 --> 00:03:21,390 So if we have something like You know you are all something like a DP WW blog dot com PPOs 5 browser 42 00:03:21,390 --> 00:03:25,140 history means whenever this part of the world changes. 43 00:03:25,320 --> 00:03:27,030 Hey re-act router you need to go update. 44 00:03:27,030 --> 00:03:29,310 You know this is the part that you care about. 45 00:03:29,990 --> 00:03:35,160 You can duck suppose this browser history with a different object hash history. 46 00:03:35,160 --> 00:03:38,130 So this would be a different way of keeping track of who you are l. 47 00:03:38,310 --> 00:03:44,910 If we were using hash history anything after a hash symbol in here so if we had something that looked 48 00:03:44,910 --> 00:03:56,740 like blague dotcom hash posts 5 with hash history we would be using everything after this hash you were 49 00:03:56,790 --> 00:04:00,600 able to keep track of what the user is currently looking at. 50 00:04:00,600 --> 00:04:07,530 Finally there's another one called memory history which doesn't really use the URL at all for reading 51 00:04:07,530 --> 00:04:15,690 the history but again in our case we're going to use browser history so we'll just see the like so. 52 00:04:16,560 --> 00:04:21,540 OK so that's the purpose of the history object it's just what part of the Eurail reactor header actually 53 00:04:21,540 --> 00:04:23,790 cares about. 54 00:04:23,790 --> 00:04:26,440 Now there's one last piece of configuration we need to add here. 55 00:04:26,610 --> 00:04:30,320 We need to tell re-act router what routes are valid in our application. 56 00:04:30,360 --> 00:04:32,930 So you know what different you are l forms. 57 00:04:32,940 --> 00:04:37,110 We really care about and then which components to show for each of them. 58 00:04:37,110 --> 00:04:39,500 Let's talk more about that in the next section.