1 00:00:00,750 --> 00:00:04,920 In last video we spoke about how we are going to create our own browser history object. 2 00:00:05,110 --> 00:00:07,740 So enough discussion let's actually start writing some code. 3 00:00:08,020 --> 00:00:13,180 I'm going to flip back over to my code editor and then inside of my S R C directory so we're not putting 4 00:00:13,180 --> 00:00:17,090 this in the actions folder or anything like that inside of SIRC. 5 00:00:17,230 --> 00:00:19,470 We're going to create a new file called history. 6 00:00:19,670 --> 00:00:20,660 Yes. 7 00:00:20,740 --> 00:00:25,840 So inside of here you and I are going to create a history object and export it for us throughout our 8 00:00:25,840 --> 00:00:27,310 entire application. 9 00:00:27,310 --> 00:00:33,130 So again the idea here is that you and I maintain this history object as opposed to react router because 10 00:00:33,130 --> 00:00:34,110 you and I are creating it. 11 00:00:34,120 --> 00:00:39,090 It's going to be a lot easier to get access to it and change what page the user is looking at. 12 00:00:39,430 --> 00:00:50,330 So at the top I'm going to import create history from history slash create browser history like so. 13 00:00:50,720 --> 00:00:57,020 So first off history right here the history package was installed automatically with re-act Rotterdam 14 00:00:57,260 --> 00:00:59,010 when I've been talking about that history object. 15 00:00:59,030 --> 00:01:04,460 It's technically a separate library that re-act Rotterdam depends upon as a dependency. 16 00:01:04,460 --> 00:01:09,140 So you did not have to manually install this package it was installed automatically as a dependency 17 00:01:09,140 --> 00:01:10,750 of re-act Rotterdam. 18 00:01:11,330 --> 00:01:15,540 So we are importing from the history package a file called create browser history. 19 00:01:15,740 --> 00:01:16,800 So create history right here. 20 00:01:16,820 --> 00:01:21,450 This is a function that we can call to create a new history object. 21 00:01:21,500 --> 00:01:26,810 So after the import statement we are going to export default create history like so and believe it or 22 00:01:26,810 --> 00:01:27,050 not. 23 00:01:27,050 --> 00:01:27,530 That is it. 24 00:01:27,530 --> 00:01:29,610 We don't have to do anything else. 25 00:01:29,660 --> 00:01:34,430 So this is now going to create a history object that you and I maintain and we can get access to anywhere 26 00:01:34,430 --> 00:01:36,370 inside of our project. 27 00:01:36,380 --> 00:01:42,470 So the first thing we need to do is make sure that we create a plain router in site instead of a browser 28 00:01:42,530 --> 00:01:43,660 router. 29 00:01:43,790 --> 00:01:49,270 So I'm going to flip back over to my component's apt geus file. 30 00:01:49,540 --> 00:01:54,100 I want to show you the error message that you would get if you don't go through creating this manual 31 00:01:54,750 --> 00:01:59,350 replaying router object just so you have a little bit of I don't know something interesting to look 32 00:01:59,350 --> 00:01:59,930 at. 33 00:02:00,280 --> 00:02:07,630 So at the top I'm going to import history from up one directory history and then I'm going to pass as 34 00:02:07,630 --> 00:02:09,190 a prop to my browser router. 35 00:02:09,220 --> 00:02:18,710 I get a pass in that history object and I'm going to call it history as the prop like so. 36 00:02:18,910 --> 00:02:24,310 So anytime that we pass in a prop called history the router is going to attempt to use it instead of 37 00:02:24,400 --> 00:02:30,070 its default implementation which is to create its own internal history object like the original diagram 38 00:02:30,070 --> 00:02:35,530 we looked at over here son going to save both these files now and I'll flip back over to my application 39 00:02:36,370 --> 00:02:39,600 and I'll notice a warning and side of your console. 40 00:02:40,300 --> 00:02:43,830 So open up that console and you're going to see browser router ignores the history prompts. 41 00:02:43,870 --> 00:02:48,730 Like I said I wanted you to see the error message that you would get if you try to pass in the history 42 00:02:48,730 --> 00:02:53,340 object with a browser router essentially re-act Rotterdam is saying here. 43 00:02:53,410 --> 00:02:56,970 Hey the browser router I create my own history object. 44 00:02:57,010 --> 00:02:59,470 You can't tell me what history to use. 45 00:02:59,470 --> 00:03:01,590 That's the warning message you're seeing here. 46 00:03:01,630 --> 00:03:05,710 So if you read that err message or the warning carefully it essentially is saying what I just told you 47 00:03:05,920 --> 00:03:12,990 we need to import a plain router and we'll pass our history object into the plain router so to do so. 48 00:03:13,000 --> 00:03:14,850 All flip back over to my laptop. 49 00:03:14,950 --> 00:03:18,670 File at the very top of find the import statement for browser router. 50 00:03:18,820 --> 00:03:24,660 So no longer are we going to use browser router instead we're going to use just router old and find 51 00:03:24,660 --> 00:03:31,110 my browser router tag and replace it with router and I'll find the closing tag and replace it with router 52 00:03:31,140 --> 00:03:31,810 as well. 53 00:03:32,780 --> 00:03:38,690 So now we can save this flip back over and the warning message goes away. 54 00:03:38,760 --> 00:03:43,810 And now if you start to click around you'll notice that navigation occurs exactly as it did before. 55 00:03:43,980 --> 00:03:46,320 So there's no difference here whatsoever. 56 00:03:46,470 --> 00:03:51,420 The only change is that you and I are now in charge of that history object as opposed to react better 57 00:03:51,430 --> 00:03:53,420 Dom creating it internally. 58 00:03:53,430 --> 00:03:59,160 So now we've got the history object which means we can trigger direct navigation or programmatic navigation 59 00:03:59,190 --> 00:04:01,920 from our create stream action Creator. 60 00:04:01,920 --> 00:04:03,080 All right so quick pause right here. 61 00:04:03,120 --> 00:04:07,590 When we come back the next section we'll start to do that programmatic navigation after we successfully 62 00:04:07,590 --> 00:04:08,520 create a stream.