1 00:00:01,350 --> 00:00:02,700 I love re-act router. 2 00:00:02,700 --> 00:00:06,990 But there definitely are a little couple aspects to it that are maybe a little bit more challenging 3 00:00:06,990 --> 00:00:09,030 to understand than you might expect. 4 00:00:09,090 --> 00:00:12,490 One in particular is the difference between browser history and hash history. 5 00:00:12,810 --> 00:00:16,810 In this video we're going to talk about the differences between browser history and hash history. 6 00:00:16,930 --> 00:00:21,480 And then we're going to do a deep dive in how we make use of browser history in a production type environment 7 00:00:21,480 --> 00:00:21,840 . 8 00:00:21,840 --> 00:00:25,650 So there are some little subtleties in there with your server set up that we'll make sure are really 9 00:00:25,650 --> 00:00:27,940 clear when you're using browser history. 10 00:00:28,050 --> 00:00:29,370 So let's get started. 11 00:00:29,550 --> 00:00:31,580 I've got an application put together already. 12 00:00:31,620 --> 00:00:33,210 I've got two existing routes. 13 00:00:33,210 --> 00:00:38,100 One is the route route which is just forward slash and then I've got the users route which shows me 14 00:00:38,100 --> 00:00:40,170 this users list component. 15 00:00:40,290 --> 00:00:44,100 Now this app doesn't really do anything special right now so let's check in on the browser. 16 00:00:44,580 --> 00:00:51,090 I see the app component right now I'm on localhost ADHD so I can only matching the app component and 17 00:00:51,090 --> 00:00:55,740 if I go to slash users I now see my users list. 18 00:00:55,740 --> 00:00:57,770 So here's the user list right here. 19 00:00:58,370 --> 00:01:00,020 So right now I'm making use of browser history. 20 00:01:00,030 --> 00:01:06,240 So first point discussion what is the difference between browser history and hash history both these 21 00:01:06,240 --> 00:01:10,620 history objects are doing one thing for reactor out or exactly one thing. 22 00:01:10,650 --> 00:01:16,290 It is telling re-act router which part of the Eurail to consider when deciding what components to show 23 00:01:16,290 --> 00:01:17,110 on the screen. 24 00:01:17,180 --> 00:01:17,740 OK. 25 00:01:18,090 --> 00:01:22,820 So in that case with browser history which we're using right now we're saying hey re-act router. 26 00:01:22,860 --> 00:01:28,680 Whenever you decide to render some stuff to the screen I only want you to look to the right of the TMD 27 00:01:28,860 --> 00:01:35,040 where the Tildy is like your dot com or your dot you or your dot gov or whatever it might be. 28 00:01:35,040 --> 00:01:41,160 So if in that example dot com slash user's browser history is going to tell re-act router only consider 29 00:01:41,190 --> 00:01:44,340 slash users when deciding what components to show on the screen. 30 00:01:44,340 --> 00:01:47,010 And that's exactly the behavior that we just saw in the browser. 31 00:01:47,010 --> 00:01:47,280 Right. 32 00:01:47,280 --> 00:01:51,600 We saw localhost slash users and then we got our user list on the screen. 33 00:01:51,600 --> 00:02:00,570 So not that not bad hash history is very similar nearly identical with just one tiny difference how 34 00:02:00,600 --> 00:02:07,080 history tells you that router find a hash in the URL and then everything to the right of the hash is 35 00:02:07,080 --> 00:02:10,550 what you should use to decide what to show on the screen. 36 00:02:10,560 --> 00:02:17,250 So I got flash users or Zimmy hash slash users and I would expect to still see the user list so I can 37 00:02:17,250 --> 00:02:22,850 very simply change out my browser history object here for a hash history. 38 00:02:23,850 --> 00:02:32,280 And now if I let's say that I go back to localhost ADHD you can see that automatically and I know this 39 00:02:32,280 --> 00:02:35,970 is really small on the screen but unfortunate I can't really dial up the. 40 00:02:36,170 --> 00:02:36,490 OK. 41 00:02:36,510 --> 00:02:39,170 That works for you. 42 00:02:39,900 --> 00:02:41,220 So you can see that. 43 00:02:41,220 --> 00:02:46,890 Now I got a hash automatically inserted into the URL and everything off to the right hand side is what 44 00:02:46,890 --> 00:02:49,020 we're going to consider when deciding what to show on the screen. 45 00:02:49,200 --> 00:02:51,940 So if I then click on users I get hash. 46 00:02:51,950 --> 00:02:54,470 Slash users and boom I got my users list. 47 00:02:54,660 --> 00:02:59,970 So the sole difference in browser history and hash history is what part of the world do I look at when 48 00:02:59,970 --> 00:03:01,760 considering what to put on the page. 49 00:03:02,040 --> 00:03:02,300 OK. 50 00:03:02,310 --> 00:03:05,790 So that's that's the easy part of history is right that's the part where of course you can check the 51 00:03:05,790 --> 00:03:08,010 documentation and figure this part out. 52 00:03:08,010 --> 00:03:09,350 This is the easy part. 53 00:03:09,540 --> 00:03:09,920 Why. 54 00:03:09,930 --> 00:03:13,820 The real question is why in the world would we use one or the other. 55 00:03:14,070 --> 00:03:15,650 Why would we use one of the other. 56 00:03:15,870 --> 00:03:17,280 There's really two good answers to this. 57 00:03:17,280 --> 00:03:20,320 The first off is the obvious one the obvious answer. 58 00:03:20,700 --> 00:03:25,440 Obviously you would want to use browser history if you want to have what is referred to in that industry 59 00:03:25,470 --> 00:03:27,410 as pretty you or else. 60 00:03:27,500 --> 00:03:33,120 So your L that looks right you know reasonably human legible something you could pretty easily type 61 00:03:33,120 --> 00:03:34,960 into the address bar if you had to. 62 00:03:35,250 --> 00:03:40,710 Whereas with past history you don't really get that benefit you got that presumably ugly hash in there 63 00:03:41,370 --> 00:03:43,100 to figure out what your you are is. 64 00:03:43,170 --> 00:03:49,210 Now I've never really sat down with a common user out there and said hey Which of these two do either 65 00:03:49,250 --> 00:03:50,630 these two really repulse you. 66 00:03:50,640 --> 00:03:51,210 Right. 67 00:03:51,360 --> 00:03:57,000 But the inclination in the industry is that if you want pretty you or else you're going to go with your 68 00:03:57,000 --> 00:03:59,280 browser history so you don't have to deal with that hash. 69 00:03:59,280 --> 00:03:59,540 OK. 70 00:03:59,550 --> 00:04:01,350 So that's that's the obvious one right. 71 00:04:01,350 --> 00:04:06,130 That's the obvious one we do have to do with the hash but is there any other reason beyond that. 72 00:04:06,250 --> 00:04:12,690 And in fact there is there is a very distinct very good reason where you might use hash history over 73 00:04:12,690 --> 00:04:14,270 browser history. 74 00:04:14,940 --> 00:04:16,500 Let's talk about hashes first. 75 00:04:16,550 --> 00:04:17,120 OK. 76 00:04:17,460 --> 00:04:23,480 Let's imagine for a second that I'm working on an existing gigantic application. 77 00:04:23,910 --> 00:04:27,380 It might be Rail's or Django flask. 78 00:04:27,570 --> 00:04:31,190 EXPRESS Any any existing back end server right. 79 00:04:31,200 --> 00:04:34,050 Let's say that I've got some existing server put together. 80 00:04:34,470 --> 00:04:41,820 And when a user goes to let's say local assiduity we can imagine example dot com or something like that 81 00:04:41,840 --> 00:04:42,050 . 82 00:04:42,270 --> 00:04:51,460 And then if they go to admin just like so and we say whenever someone goes to slash admen that is going 83 00:04:51,460 --> 00:04:56,830 to access some route on our existing server and load up some like Agnon. 84 00:04:56,860 --> 00:05:00,320 Each team mail file case we've got for this route right. 85 00:05:00,330 --> 00:05:03,640 You're a very specific response coming in from the server. 86 00:05:03,850 --> 00:05:09,700 But on top of this route once someone gets here once they load up slash Admin we then want to load up 87 00:05:09,700 --> 00:05:16,710 some front and re-act router application that would be the use case of hash history. 88 00:05:17,020 --> 00:05:21,430 So what I'm kind of getting out there I know that's not entirely clear is if you are working off an 89 00:05:21,430 --> 00:05:27,730 existing server with a ton of existing routes set up and you want to just throw on top of it a reactor 90 00:05:27,730 --> 00:05:31,210 outer application that is exactly where you would use Hashi history. 91 00:05:31,450 --> 00:05:36,550 And the reason for that might not be 100 percent clear until we talk about why you would not want to 92 00:05:36,550 --> 00:05:39,090 use browser history for it. 93 00:05:39,130 --> 00:05:43,450 So at this point in time we're going to do a little bit of pivot here and talk about browser history 94 00:05:43,720 --> 00:05:48,940 and why it's set up for a production environment is a little bit strange and something that you really 95 00:05:48,940 --> 00:05:53,750 need to be aware of especially when you're trying to work with legacy applications. 96 00:05:54,030 --> 00:05:54,620 OK. 97 00:05:54,880 --> 00:05:56,790 So let's figure this out. 98 00:05:57,070 --> 00:06:07,390 I'm going to change my history back to browser history and I'll refresh the page and I'm going to clean 99 00:06:07,390 --> 00:06:07,910 up the oil. 100 00:06:07,930 --> 00:06:08,180 So. 101 00:06:08,180 --> 00:06:08,430 OK. 102 00:06:08,440 --> 00:06:09,490 Local as ADHD. 103 00:06:09,550 --> 00:06:11,200 Totally fine. 104 00:06:11,230 --> 00:06:13,360 Now I'm going to go to a user's OK slash users. 105 00:06:13,360 --> 00:06:14,140 Everything looks good. 106 00:06:14,140 --> 00:06:15,130 Everything is happy. 107 00:06:15,130 --> 00:06:16,880 This is perfect. 108 00:06:17,500 --> 00:06:21,700 Right now I want to point out to you that the server that I'm running off of you know that serving this 109 00:06:21,700 --> 00:06:26,000 application right here is a web packed web server so dev server. 110 00:06:26,020 --> 00:06:28,750 Not something I would want to use in a production environment. 111 00:06:28,750 --> 00:06:31,240 So we are going to create a new server right now. 112 00:06:31,240 --> 00:06:35,320 It's going to be a tiny little Express application and we're going to pretend that maybe it's going 113 00:06:35,320 --> 00:06:38,340 to grow really big over time and the entire point of this. 114 00:06:38,350 --> 00:06:44,260 The reason we're creating a separate server is to kind of illustrate some idiosyncrasies of browser 115 00:06:44,260 --> 00:06:45,110 history. 116 00:06:45,250 --> 00:06:47,240 So let's put this server together. 117 00:06:47,370 --> 00:06:49,480 I mean to create a new file called server. 118 00:06:49,610 --> 00:06:50,750 Yes. 119 00:06:51,610 --> 00:06:58,390 And inside if you we're going to put together just a tiny little Express application. 120 00:06:58,390 --> 00:07:07,450 So import express I'll declare a path and my port and then I'll create my express application 121 00:07:10,300 --> 00:07:16,150 I'm going to tell express to serve everything out of the current working directory so that's going to 122 00:07:16,150 --> 00:07:20,660 give anyone who comes to my server they could get access to like my stylesheet. 123 00:07:20,680 --> 00:07:23,610 So style that CSA us stuff like that. 124 00:07:24,550 --> 00:07:30,020 And now I'm going to put on Abda listen on port. 125 00:07:30,980 --> 00:07:33,360 It will cost lives server started. 126 00:07:33,490 --> 00:07:34,370 OK. 127 00:07:34,460 --> 00:07:38,890 All right so what we're going to do here is we are going to take advantage of the fact that if you go 128 00:07:38,890 --> 00:07:46,360 to a server or some like root path or some folder or some directory if you are not accessing some specific 129 00:07:46,360 --> 00:07:49,770 file in that directory you will be served up index page to you now. 130 00:07:49,810 --> 00:07:53,300 OK so this is exploiting something basically as old as the Internet. 131 00:07:53,320 --> 00:07:57,740 If you are not specifying a file you will get served up index HVM out. 132 00:07:58,120 --> 00:08:03,700 So right now because I put in this line right here that basically says Serve the current directory give 133 00:08:03,760 --> 00:08:06,640 everyone access to this folder right here. 134 00:08:06,640 --> 00:08:12,710 If they come to localhost 1880 when I navigate to that I will be automatically served up index HTML 135 00:08:12,950 --> 00:08:13,010 . 136 00:08:13,030 --> 00:08:18,520 So let's test this up and browse a really quick stop my web packed web server 137 00:08:21,910 --> 00:08:26,030 and I start up my notes server or refreshed the page and. 138 00:08:26,040 --> 00:08:26,390 OK. 139 00:08:26,410 --> 00:08:27,210 Looks good. 140 00:08:27,250 --> 00:08:32,680 I definitely gotten each HTML document right here and it appears that I got my style sheet. 141 00:08:32,710 --> 00:08:39,010 I got some stuff from bootstraps VSS but I do have a 4 or 4 on my bundled JS files so bundle that guess 142 00:08:39,010 --> 00:08:45,670 is the compiled or kind of bundled I suppose for lack of a better term javascript file that represents 143 00:08:45,670 --> 00:08:48,100 my entire app it's got react in it. 144 00:08:48,100 --> 00:08:51,130 Scott re-act router redux. 145 00:08:51,250 --> 00:08:53,240 All the code that I wrote all that kind of stuff. 146 00:08:53,260 --> 00:08:57,730 So when I'm using web pack a bundled up G-S file is not created. 147 00:08:57,730 --> 00:08:59,120 It is actually serve from memory. 148 00:08:59,150 --> 00:09:05,290 So just as this is a total sidetrack right here by then create a bundle that G-S out of my current application 149 00:09:05,590 --> 00:09:08,050 by running well-packed Mashpee. 150 00:09:08,590 --> 00:09:11,300 And so it takes just a second. 151 00:09:12,180 --> 00:09:18,130 OK so now you can see that I've got bundled JS this directory which means if I refresh the page. 152 00:09:18,770 --> 00:09:20,500 OK here's my app again. 153 00:09:20,560 --> 00:09:22,030 So what's it to begin with like what happened here. 154 00:09:22,030 --> 00:09:22,990 What did I just change. 155 00:09:22,990 --> 00:09:28,660 All we did was we went from using well-packed server to start up our application to using a tiny little 156 00:09:28,690 --> 00:09:29,860 Express application. 157 00:09:29,890 --> 00:09:34,930 And again the whole point this where we're going to come full circle here is explain some of the idiosyncrasies 158 00:09:34,930 --> 00:09:35,770 of browser history. 159 00:09:35,770 --> 00:09:38,880 I know that we're kind of doing this in a roundabout manner. 160 00:09:39,260 --> 00:09:41,630 Anyways back to the topic at hand. 161 00:09:41,760 --> 00:09:43,220 Only something really interesting here. 162 00:09:43,360 --> 00:09:48,680 So I'm at local hosts ADHD and you can see that clearly the applications rendering I do have an error 163 00:09:48,680 --> 00:09:52,940 in my terminal down here but it's just about hey you're doing something production. 164 00:09:52,960 --> 00:09:55,430 It's really nothing relevant right now. 165 00:09:55,690 --> 00:09:56,570 So might look close. 166 00:09:56,630 --> 00:10:01,750 ADHD and I've got a link right here that will take me to my users list so when we go there so I click 167 00:10:01,750 --> 00:10:02,490 on it. 168 00:10:02,680 --> 00:10:09,370 I now see my user list component on the screen and I've got in the Urals slash users. 169 00:10:09,420 --> 00:10:17,970 So I'm clearly at localhost ADHD slash users and I've got my user list on the screen exactly as I expect 170 00:10:17,980 --> 00:10:18,070 . 171 00:10:18,150 --> 00:10:23,460 OK so I'm going to throw a wrench into this whole thing and you're going to just totally totally destroy 172 00:10:23,460 --> 00:10:24,970 this gay area. 173 00:10:25,050 --> 00:10:30,640 I just refreshed the page and also I get on the screen cannot get slashed users. 174 00:10:30,870 --> 00:10:32,070 Well what the heck. 175 00:10:32,100 --> 00:10:34,340 I was just looking at slash users. 176 00:10:34,350 --> 00:10:36,810 I was just there and I saw slash users. 177 00:10:36,900 --> 00:10:44,200 But when I refreshed the page or when I tried to go there manually I very clearly get a 404. 178 00:10:44,460 --> 00:10:47,150 And this is a 4 or 4 generated by express. 179 00:10:47,190 --> 00:10:50,130 So this is our servers saying hey what are you talking about. 180 00:10:50,140 --> 00:10:52,440 I got no idea what you're talking about slash users. 181 00:10:52,530 --> 00:10:53,180 OK. 182 00:10:53,520 --> 00:10:58,800 So but if I go back to local as ADHD and I can click on the link again and I go to slash users. 183 00:10:58,800 --> 00:11:02,620 So what in the world is going on here what could cause this kind of behavior. 184 00:11:03,330 --> 00:11:08,280 Well let's walk through a lifecycle of our of our application right now. 185 00:11:08,280 --> 00:11:11,520 So this is our application lifecycle and there's a lot of events in here. 186 00:11:11,520 --> 00:11:16,360 So it's two separate slides Let's go through it and I know you can read some not going read these you 187 00:11:16,360 --> 00:11:20,400 know steps off to you but I want to give some explanation about them. 188 00:11:20,470 --> 00:11:23,870 So first thing we did was we went to a local host ADHD when we did that. 189 00:11:23,880 --> 00:11:26,420 We hit the root route of our node server. 190 00:11:26,430 --> 00:11:32,370 So we hit basically forward slash because we didn't not specify a file. 191 00:11:32,550 --> 00:11:34,420 We were given an index each time out. 192 00:11:34,440 --> 00:11:37,140 And again this is a rule that is as old as the Internet. 193 00:11:37,140 --> 00:11:43,010 If you hit a route and there is no file provided in the address you will be given index page timeout 194 00:11:43,050 --> 00:11:43,410 . 195 00:11:43,740 --> 00:11:49,440 So index each email gets sent back to our browser and loads up it grabs our bundled Zsa's file everything 196 00:11:49,440 --> 00:11:53,190 kind of starts to boot up it loads up eventually. 197 00:11:53,220 --> 00:11:58,490 Are re-act application boots up re-act router starts up and it looks at the you around. 198 00:11:58,650 --> 00:12:00,310 And this is the important part here. 199 00:12:00,420 --> 00:12:05,940 When re-act router starts up it looks at or L and immediately decides what set of components to show 200 00:12:05,940 --> 00:12:07,020 on the screen. 201 00:12:07,020 --> 00:12:11,160 So because we were out the route route we saw the app component on the screen right. 202 00:12:11,160 --> 00:12:12,950 That's that's exactly what happened. 203 00:12:13,320 --> 00:12:20,360 All right so let's let's continue on here for a little bit after that the user me in this case I clicked 204 00:12:20,360 --> 00:12:26,900 a link on the page and specifically I clicked a link tag not like an anchor tag but a link tab which 205 00:12:26,900 --> 00:12:28,660 is provided by re-act router. 206 00:12:29,010 --> 00:12:36,660 So when I did that the address bar updated and then heres the huge key this is the like total big deal 207 00:12:36,660 --> 00:12:38,930 the whole big point of browser history right here. 208 00:12:39,000 --> 00:12:43,670 When my address bar updated I did not make a new request to the server. 209 00:12:43,800 --> 00:12:50,670 Ok so what browser history does when you navigate around on the page using link tags or when you use 210 00:12:50,670 --> 00:12:55,770 like browser history dot push or whatever it might be when you navigate around inside of your application 211 00:12:55,770 --> 00:12:56,000 . 212 00:12:56,070 --> 00:12:58,970 You are not making a new request to your server. 213 00:12:59,070 --> 00:13:03,620 You are just artificially manipulating the URL in the address bar. 214 00:13:03,660 --> 00:13:04,620 That is all you're doing. 215 00:13:04,620 --> 00:13:06,860 You are not making a follow up request. 216 00:13:07,320 --> 00:13:11,820 So now that there is a new address bar or a new address in the address bar re-act router decides to 217 00:13:11,820 --> 00:13:16,870 show a new set of components and so it's our user list on the screen. 218 00:13:16,920 --> 00:13:24,450 Then when we refresh the page that was when we actually tried to access slash users on our server which 219 00:13:24,450 --> 00:13:25,950 results in the 404. 220 00:13:26,070 --> 00:13:32,430 So the huge distinction here the big kind of surprise with browser history is that when you're navigating 221 00:13:32,430 --> 00:13:38,070 around your application it is always soling navigation inside of your application. 222 00:13:38,070 --> 00:13:45,330 The address bar updates but there is no actual new request made to the server only when you refresh 223 00:13:45,330 --> 00:13:48,600 the page or type in you are l manually and hit enter. 224 00:13:48,600 --> 00:13:51,780 Do you try to access slashy users on the server. 225 00:13:51,930 --> 00:13:56,160 In our case we didn't have that route defined and we didn't have Flash users defined so it resulted 226 00:13:56,160 --> 00:13:57,860 in a 404. 227 00:13:58,360 --> 00:13:59,840 Oh OK so that's it. 228 00:13:59,850 --> 00:14:00,800 That's why things don't work. 229 00:14:00,800 --> 00:14:04,670 That's why it doesn't quite happen as we expect so of course. 230 00:14:04,680 --> 00:14:05,520 How do we fix this. 231 00:14:05,520 --> 00:14:08,530 How do we get it working the way we expect. 232 00:14:08,550 --> 00:14:12,420 So this is the part with browser history where you got to do a little bit of setup when you moved to 233 00:14:12,420 --> 00:14:13,820 this production environment. 234 00:14:14,040 --> 00:14:19,080 When you're working in your Devyn varmint and you're using web packed dev server well-packed F-Series 235 00:14:19,080 --> 00:14:21,670 taking care of all this behavior for you if you tell it to. 236 00:14:21,680 --> 00:14:26,250 And a lot of the times the boiler plates that you use will have this setting or everything already set 237 00:14:26,250 --> 00:14:31,020 up to make well-packed dev server behave in the way you expect. 238 00:14:31,050 --> 00:14:34,330 So in a production environment how do we deal with this. 239 00:14:34,350 --> 00:14:36,500 How do we make sure we get the right stuff. 240 00:14:36,740 --> 00:14:43,230 So let's say that the user types an address and that could be slash post user's images jibberish or 241 00:14:43,230 --> 00:14:44,720 just slash. 242 00:14:45,090 --> 00:14:45,920 So here's the key. 243 00:14:45,960 --> 00:14:49,910 Here's what our server is going to do no matter what route they try to visit. 244 00:14:49,920 --> 00:14:58,430 We will always respond with our index age TMLC file when a user is served the index each file and that 245 00:14:58,490 --> 00:15:04,370 ational files load up in the browser their browser will then attempt to grab the bundle JSE file because 246 00:15:04,370 --> 00:15:08,230 we have an actual script tag in there to go and retrieve that script file. 247 00:15:08,480 --> 00:15:12,930 Once they get the script file re-act router will boot up it will look at the address bar. 248 00:15:12,950 --> 00:15:17,310 So you look at the URL and it will show a set of components on the screen. 249 00:15:17,330 --> 00:15:21,800 Hopefully the ones that correspond to like Slash posts or slash images. 250 00:15:21,800 --> 00:15:25,230 So this is how we set up our server when using browser history. 251 00:15:25,460 --> 00:15:31,550 We make sure that no matter what route a user is accessing they get always sent to the index each time 252 00:15:31,550 --> 00:15:36,710 a file and then re-act router will boot up and decide what Compounce to actually show on the screen 253 00:15:36,720 --> 00:15:37,120 . 254 00:15:37,520 --> 00:15:41,180 So let's fix up our node server to make that happen. 255 00:15:41,670 --> 00:15:44,290 And in practice it's really darn straightforward. 256 00:15:44,540 --> 00:15:48,810 Zangana to add a route using express and give it a wildcard matcher here. 257 00:15:48,830 --> 00:15:54,780 So this basically says whenever someone makes a get request to any address whatsoever. 258 00:15:55,040 --> 00:15:57,980 Run this function. 259 00:15:57,980 --> 00:16:01,610 And inside this function all red dots and file 260 00:16:06,390 --> 00:16:08,050 index page HTML. 261 00:16:08,150 --> 00:16:13,700 So what this line right here is doing is it says Go and find index H.T. amount inside of the current 262 00:16:13,700 --> 00:16:18,970 folder which are cases you know right here and send it back to the user. 263 00:16:19,040 --> 00:16:19,550 That's it. 264 00:16:19,550 --> 00:16:24,300 So no matter what route the users try and access send them indexes seamount. 265 00:16:24,360 --> 00:16:30,860 So I mean to stop this over here and restart my server. 266 00:16:32,000 --> 00:16:37,920 And now on localhost I get local as ADHD. 267 00:16:38,070 --> 00:16:41,200 OK everything works but it worked before I can click on the users. 268 00:16:41,210 --> 00:16:41,960 It still works. 269 00:16:41,960 --> 00:16:43,940 And now I can refresh the page. 270 00:16:44,060 --> 00:16:50,410 And when I refreshed the page the server sends me index each T.M. then re-act router takes over. 271 00:16:50,410 --> 00:16:54,270 Decides what to show on the screen and boom I get my users list anyways. 272 00:16:54,320 --> 00:17:02,510 So now I can go to any you or I can possibly imagine I will always be given my index each HTML file 273 00:17:02,520 --> 00:17:02,730 . 274 00:17:02,750 --> 00:17:04,910 Sometimes it might not work but that's totally fine. 275 00:17:04,910 --> 00:17:10,250 So in this case I have an error message in my consulate's says a re-act rudder says that I've got no 276 00:17:10,250 --> 00:17:12,780 idea what route you're trying to go to which is totally fine. 277 00:17:12,780 --> 00:17:13,900 Totally what I expect. 278 00:17:13,970 --> 00:17:16,140 Whereas the real. 279 00:17:16,280 --> 00:17:17,270 So it's totally what I expect. 280 00:17:17,270 --> 00:17:17,510 Right. 281 00:17:17,510 --> 00:17:22,190 Like retractors saying I don't know what route you're trying to go to here but the important distinction 282 00:17:22,220 --> 00:17:26,630 is that in this case re-act router did actually get loaded up into the browser. 283 00:17:26,630 --> 00:17:30,810 So we are actually loading up the index each T.M. we're getting the right stuff on the screen. 284 00:17:30,860 --> 00:17:31,860 OK. 285 00:17:32,270 --> 00:17:32,570 OK. 286 00:17:32,570 --> 00:17:36,690 So this is how we make browser history work in a node application. 287 00:17:36,890 --> 00:17:41,990 But the one little distinction here the one question you might have was well Stephen you're saying that 288 00:17:41,990 --> 00:17:45,040 no matter what route I go to I'm always going send a message to e-mail. 289 00:17:45,050 --> 00:17:47,450 How do I send like an API request. 290 00:17:47,460 --> 00:17:51,880 You know how do I respond with Jaison for some API endpoint. 291 00:17:51,890 --> 00:17:54,340 And the answer is that you still can. 292 00:17:54,480 --> 00:17:57,370 So I'm going to add API to post on your 293 00:18:01,280 --> 00:18:04,610 side if you're all ID one. 294 00:18:04,610 --> 00:18:05,980 So just you know whatever. 295 00:18:05,990 --> 00:18:12,950 Basically if someone gets does a get request to slash API slash posts send them back in array that has 296 00:18:12,950 --> 00:18:15,050 one object with an ID of one. 297 00:18:15,050 --> 00:18:17,680 So just kind of a dummy Json end point here. 298 00:18:18,140 --> 00:18:24,760 What I want to point out to you in particular though is that I added this route handler above the catch 299 00:18:24,760 --> 00:18:25,700 all route down here. 300 00:18:25,700 --> 00:18:30,650 So the way that express works is it looks the order in which you define your routes is the order in 301 00:18:30,650 --> 00:18:33,290 which Express will try to match them. 302 00:18:33,290 --> 00:18:39,260 So because I define this route handler before this matcher or this kind of catch all down here I will 303 00:18:39,260 --> 00:18:42,510 make sure that I always send back a few I-Slash pose. 304 00:18:42,530 --> 00:18:46,870 If someone tries to access this route so if someone goes here theyre not going to get the index H.T. 305 00:18:46,910 --> 00:18:49,920 mail file if they go here theyll get the Jaison instead. 306 00:18:49,940 --> 00:18:55,180 And this happens solely because I put the handler above the catchall. 307 00:18:55,190 --> 00:19:04,010 So now I should be able to go to API slash posts and I get an array with object id one on the screen 308 00:19:04,010 --> 00:19:04,760 . 309 00:19:04,760 --> 00:19:09,950 All right so inclosing browser history Housh history some very small differences when you are using 310 00:19:09,950 --> 00:19:14,990 browser history you always got to be aware of how your application is going to behave in a production 311 00:19:14,990 --> 00:19:16,440 vitamines specifically. 312 00:19:16,550 --> 00:19:21,470 You need to make sure that no matter what happens you send back your index to mail file and you are 313 00:19:21,470 --> 00:19:26,860 going to rely upon re-act router to decide what to show on the screen. 314 00:19:27,180 --> 00:19:29,210 So thats it. 315 00:19:29,210 --> 00:19:35,730 If you enjoyed this webcast I do weekly videos on Express redox re-act javascript's. 316 00:19:35,750 --> 00:19:37,070 You know just all kinds of things. 317 00:19:37,070 --> 00:19:42,230 Check out reli coating dot com sign off the email list will send you one tiny little email once a week 318 00:19:42,230 --> 00:19:44,530 with an interesting topic just like this. 319 00:19:44,690 --> 00:19:46,250 I hope to see you next week.