1
00:00:00,630 --> 00:00:04,410
In this video I want to go over one last topic around re-act router.

2
00:00:04,520 --> 00:00:08,810
Now this video is going to be optional so if you are kind of tired of free Kreder and you want to continue

3
00:00:08,810 --> 00:00:12,380
writing some code puzzle video right now and continue to the next video.

4
00:00:12,410 --> 00:00:14,530
Otherwise stick around and we'll get into it.

5
00:00:14,540 --> 00:00:17,930
Now the reason that this video is optional is that this has some knowledge that it's not really going

6
00:00:17,930 --> 00:00:21,890
to be relevant until you go to deploy your application at some point in the future.

7
00:00:21,890 --> 00:00:26,090
Nonetheless this is a really common question that comes up all the time around re-act router.

8
00:00:26,090 --> 00:00:30,200
So I figured I would throw in a quick discussion right now to see what kind of are prepared with this

9
00:00:30,200 --> 00:00:31,260
knowledge right now.

10
00:00:31,580 --> 00:00:32,810
OK so let's get to it.

11
00:00:32,870 --> 00:00:36,810
The core of this discussion is around this browser router thing right here.

12
00:00:37,010 --> 00:00:41,500
Now in total re-act router actually has three different types of routers available.

13
00:00:41,510 --> 00:00:44,150
There is the browser router right here that we've made use of.

14
00:00:44,150 --> 00:00:46,730
And then there are two other routers as well.

15
00:00:46,730 --> 00:00:48,170
Each of these different routers.

16
00:00:48,170 --> 00:00:52,400
The only difference between them is the part of the Eurail that they're going to look at when deciding

17
00:00:52,400 --> 00:00:54,470
what content to show on the screen.

18
00:00:54,470 --> 00:00:57,710
So let me tell you the difference exactly between all three.

19
00:00:57,710 --> 00:00:59,350
All right.

20
00:00:59,510 --> 00:01:03,080
So we have the browser router which we've already used inside of our application.

21
00:01:03,080 --> 00:01:06,540
We also have something called a hash router and a memory router.

22
00:01:06,650 --> 00:01:11,390
Again the big difference between these is the part of the euro that each router is going to use to track

23
00:01:11,420 --> 00:01:14,690
what content the user is trying to view with the browser router.

24
00:01:14,720 --> 00:01:19,970
It's essentially that we discuss so far with the browser router re-act router is going to look for the

25
00:01:20,030 --> 00:01:25,910
top level domain or the TLT that is the dot com or the dot net or the dot edu whatever it is and it's

26
00:01:25,910 --> 00:01:28,630
going to look for everything after that top level domain.

27
00:01:28,920 --> 00:01:34,040
Alternatively if you have a port definition it's going to look for everything after the port definition.

28
00:01:34,040 --> 00:01:39,550
So with the browser router if we have a Eurail like localhost Colan 3000 slash page to react rodder

29
00:01:39,560 --> 00:01:45,260
cares about just flash page to now things start to get a little bit more interesting with the hash router

30
00:01:45,650 --> 00:01:51,680
with a hash router re-act routers going to automatically put a little hash character or a pound sign

31
00:01:51,710 --> 00:01:57,600
into your your L and then it's going to automatically trying to reflect the current path.

32
00:01:57,620 --> 00:01:59,390
After that hash character.

33
00:01:59,520 --> 00:02:03,950
Now that might sound like a really weird distinction to make but we'll talk about why that's relevant

34
00:02:03,980 --> 00:02:04,930
in just a moment.

35
00:02:05,840 --> 00:02:11,300
And then finally with the memory router the Ural is not used at all to track navigation.

36
00:02:11,300 --> 00:02:15,120
Now as I go through these descriptions of each of these they seem a little bit weird.

37
00:02:15,170 --> 00:02:19,340
So I think that the best thing to do to understand the difference between each one is actually use them

38
00:02:19,340 --> 00:02:22,980
inside of our application and that will give you a better idea of the differences.

39
00:02:23,180 --> 00:02:27,980
After we tried putting in each of these routers to our code and tested out really quickly I'm going

40
00:02:27,980 --> 00:02:32,480
to tell you exactly why we use each of these different routers and that's the really important part

41
00:02:32,480 --> 00:02:35,970
for you to understand because that's the part that is actually relevant to deployment.

42
00:02:36,100 --> 00:02:38,000
And I just see you know one other quick thing here.

43
00:02:38,030 --> 00:02:42,980
This is going to be a long video because I'm going to try to fit everything into this one single video

44
00:02:42,980 --> 00:02:46,880
so that if you skipped over this you don't have to like go to the next section where I'm still talking

45
00:02:46,880 --> 00:02:48,950
about the same thing that I just told you to skip.

46
00:02:48,950 --> 00:02:50,450
So anyways let's get to it.

47
00:02:50,450 --> 00:02:54,250
We're going to try out each three of each of these three OK.

48
00:02:54,290 --> 00:02:57,790
Cygne first try out the hash rodder because we've already tried out the browser router.

49
00:02:57,950 --> 00:03:04,680
So at the very top I'm going to change my import statement to hash router or then go down to my app

50
00:03:04,680 --> 00:03:12,250
component and replace browser router with router and hash router like so and then I'll save this all

51
00:03:12,260 --> 00:03:19,680
foot back over to my application and I'm going to enter in localhost Colin 3000 and then I'm gonna hit

52
00:03:19,740 --> 00:03:20,220
enter.

53
00:03:20,220 --> 00:03:22,690
To cause a full reload of the page.

54
00:03:22,710 --> 00:03:29,250
Now when I do that you'll notice that we now get a pound symbol injected into our l automatically.

55
00:03:29,260 --> 00:03:35,470
In addition if I now navigate over to page 2 I'll see that my Eurail has now been updated to be pounde

56
00:03:35,560 --> 00:03:37,110
splash page 2.

57
00:03:37,210 --> 00:03:38,710
So that's like pretty much it.

58
00:03:38,710 --> 00:03:41,590
Believe it or not that is the difference between the browser router and a hash router.

59
00:03:41,710 --> 00:03:47,530
All we're doing now is reflecting the part of the Israel that reactor cares about after that hash character

60
00:03:47,910 --> 00:03:52,840
and any time that you navigate around the page using a link tag react ratters going to change only the

61
00:03:52,840 --> 00:03:58,740
portion after the pound now again it might seem like completely irrelevant or like you know who cares

62
00:03:58,740 --> 00:03:59,480
about this at all.

63
00:03:59,550 --> 00:04:02,570
But there is a extremely good reason for this difference here.

64
00:04:02,600 --> 00:04:04,000
We'll talk about it in just a moment.

65
00:04:04,080 --> 00:04:07,470
Before we do let's try out that memory router very quickly as well.

66
00:04:08,800 --> 00:04:13,460
So I can flip back over to my Abdias file and I'm going to change it to memory router.

67
00:04:15,230 --> 00:04:23,030
And then I'll go back down to the component and change to memory router and memory router like so then

68
00:04:23,030 --> 00:04:24,850
I'll save this and I'll flip back over.

69
00:04:24,920 --> 00:04:30,090
Now in this case I again really encourage you to manually navigate back to localhost 3000.

70
00:04:30,450 --> 00:04:34,610
OK so now once I'm back here I should be able to click on the link and I'm going to see that you are

71
00:04:34,610 --> 00:04:38,470
ill no longer updates at all as I navigate around my application.

72
00:04:39,470 --> 00:04:39,740
OK.

73
00:04:39,780 --> 00:04:42,150
That's essentially a difference between all three.

74
00:04:42,150 --> 00:04:46,170
Now really quickly I want to flip back to making use of browser router just in case you fall out of

75
00:04:46,170 --> 00:04:50,500
this video or stop it at any point in time so that you don't steal the memory router inside of your.

76
00:04:50,550 --> 00:04:53,840
So I'm going to change back to browser router at the top.

77
00:04:55,030 --> 00:05:00,080
And browser router inside the component on both those tags.

78
00:05:00,110 --> 00:05:04,750
Now if I flip back on my application I shall be able to click on the link and I'll see the entire Eurail

79
00:05:04,900 --> 00:05:06,880
change as we did before.

80
00:05:06,880 --> 00:05:11,890
All right so now here's the important part why do we care what is the real difference right.

81
00:05:12,020 --> 00:05:14,000
Why do we care about enemies at all.

82
00:05:14,290 --> 00:05:17,180
Well like I said a lot of this comes down to deployment.

83
00:05:17,200 --> 00:05:22,870
This is a really important topic when you think about deploying your application in particular if you're

84
00:05:22,870 --> 00:05:29,230
trying to use the browser router the browser router which is what just about every tutorial around re-act

85
00:05:29,230 --> 00:05:34,810
router Dohm is ever going to tell you to use is by far the most complicated to deploy inside of any

86
00:05:34,870 --> 00:05:36,050
realistic setting.

87
00:05:36,370 --> 00:05:42,070
Now in many cases doing deployment with browser router is going to be very easy because a lot of deployment

88
00:05:42,070 --> 00:05:47,470
services automatically understand that you're going to use something like browser router to deploy your

89
00:05:47,470 --> 00:05:48,010
application.

90
00:05:48,010 --> 00:05:52,060
And so a lot of deployment services are going to make deployment with Brough's router pretty easy and

91
00:05:52,110 --> 00:05:56,950
straightforward but there are many cases where deployment is going to be extremely challenging.

92
00:05:56,950 --> 00:05:59,260
So let me tell you exactly why that is.

93
00:05:59,290 --> 00:06:01,520
We're going to take a look at a couple of different diagrams.

94
00:06:02,590 --> 00:06:04,960
Onka So first diagram right here.

95
00:06:04,960 --> 00:06:11,030
This is a diagram of what happens when we make a request to local oh 3000 slash page one if local or

96
00:06:11,040 --> 00:06:18,160
3000 was a very traditional server like a very traditional Java or Ruby or Python server that always

97
00:06:18,160 --> 00:06:22,180
returned some H.T. mail as opposed to a reactor application.

98
00:06:22,180 --> 00:06:26,590
So I just want you to picture first second that at local to those three thousand we no longer had our

99
00:06:26,590 --> 00:06:27,660
re-act application.

100
00:06:27,670 --> 00:06:34,790
Instead we had some very traditional server that generates and returns some HMO OK.

101
00:06:35,030 --> 00:06:41,090
So we might type in an address like local 3000 slash page one our browser would then make a request

102
00:06:41,240 --> 00:06:46,520
to our back end server the backend server would then have some logic inside of it to look at the route

103
00:06:46,570 --> 00:06:48,810
that you were making a request for.

104
00:06:49,040 --> 00:06:51,070
So the server would then ask a question.

105
00:06:51,200 --> 00:06:54,590
OK let's see do I have a route for Slash page one.

106
00:06:54,680 --> 00:07:00,260
And then inside of your server code there might be some route handler that says like OK anytime someone

107
00:07:00,260 --> 00:07:05,310
makes a request to slash page 1 generate some e-mail and send it back in the response.

108
00:07:05,340 --> 00:07:07,290
So the server would say OK let's see.

109
00:07:07,330 --> 00:07:09,090
Yup I've got some logic here it says.

110
00:07:09,090 --> 00:07:13,980
Anytime someone makes requests to slash page one I'm supposed to produce a smell and send it back to

111
00:07:14,000 --> 00:07:18,600
the server does so it generates some HD mail and then responds with that each HTML document.

112
00:07:18,800 --> 00:07:23,630
And so a single document gets sent back to the browser and everyone's happy content shows up on the

113
00:07:23,630 --> 00:07:24,070
screen.

114
00:07:25,680 --> 00:07:30,790
Now let's go over the same process but I want to imagine what would happen if our back and server.

115
00:07:30,810 --> 00:07:35,730
This very traditional server did not have a route defined for splash page 1.

116
00:07:36,150 --> 00:07:38,830
So here's what would happen if that was the case.

117
00:07:38,850 --> 00:07:42,640
Or actually I'm sorry in this case I use Page two just make it a little bit different.

118
00:07:42,690 --> 00:07:47,280
So let's imagine now that our server made a request to close 3000 slash page.

119
00:07:47,520 --> 00:07:51,750
So browser makes the request and then the traditional server says Do I have a route for splash page

120
00:07:51,750 --> 00:07:52,240
too.

121
00:07:52,290 --> 00:07:56,250
But in this case no I don't have any route defined for splash page 2.

122
00:07:56,340 --> 00:07:57,880
And so what does the server do.

123
00:07:57,900 --> 00:08:00,090
It responds with a 404 error.

124
00:08:00,180 --> 00:08:03,480
Remember a for a for error is a not found error.

125
00:08:03,480 --> 00:08:07,670
It means that our server had no defined route for Page 2.

126
00:08:07,680 --> 00:08:11,730
And so the server said Sorry I don't know what to do with your request so I'm gonna return an air and

127
00:08:11,730 --> 00:08:15,620
tell you that you made a bad request and I don't know how to handle this.

128
00:08:15,630 --> 00:08:18,840
So again this is what happens with a traditional server.

129
00:08:18,840 --> 00:08:24,060
The point that I'm trying to make here is that with a traditional server if you make a request to some

130
00:08:24,060 --> 00:08:29,450
route that is not defined the server is going to respond with a 404 not found.

131
00:08:29,460 --> 00:08:32,480
And it's going to say I've got no idea what you're asking for.

132
00:08:32,520 --> 00:08:33,040
Right.

133
00:08:33,060 --> 00:08:36,110
That is how a traditional server works.

134
00:08:36,120 --> 00:08:38,670
So now let's think about this entire flow.

135
00:08:38,820 --> 00:08:42,220
But with our re-act development server instead.

136
00:08:42,480 --> 00:08:47,240
So as a reminder right now our application is being hosted by a re-act development server.

137
00:08:47,250 --> 00:08:49,780
This is a server that is running from our terminal.

138
00:08:49,800 --> 00:08:53,900
We launch it every time we start up a new project with NPM start.

139
00:08:53,910 --> 00:08:58,320
This is a server that is running on your computer and each time that you make a request to localhost

140
00:08:58,340 --> 00:09:01,920
3000 you are accessing the re-act development server.

141
00:09:02,390 --> 00:09:02,880
All right.

142
00:09:02,880 --> 00:09:07,310
So let's walk through this flow and see what happens with the reactive elements server.

143
00:09:07,350 --> 00:09:12,980
In particular Now one thing that I want to mention very quickly here before we actually go through this

144
00:09:12,980 --> 00:09:19,670
flow I want to point out the fact that right now our application only has a definition of what to do

145
00:09:19,850 --> 00:09:24,120
for the SLAs for the right of slash page to inside of our app.

146
00:09:24,200 --> 00:09:26,260
Yes file like this app component right here.

147
00:09:26,390 --> 00:09:32,590
At this point we have written absolutely zero code that has been executed by any server whatsoever.

148
00:09:32,750 --> 00:09:38,810
In other words run trying to tell you is that are Riak development server has no idea what the splash

149
00:09:38,810 --> 00:09:40,120
page to route means.

150
00:09:40,130 --> 00:09:41,780
It doesn't know what to do with it.

151
00:09:41,810 --> 00:09:46,880
And so if this was a traditional server and we made requests to page two and the traditional server

152
00:09:46,880 --> 00:09:51,560
didn't have that route defined it would definitely respond with a 404 but the re-act development server

153
00:09:51,620 --> 00:09:53,150
is a little bit different.

154
00:09:53,150 --> 00:09:54,430
So here's what happens.

155
00:09:55,920 --> 00:09:59,050
So we make a request to localhost 3000 slash page 2.

156
00:09:59,300 --> 00:10:02,350
So that makes the request over to that server running on your machine.

157
00:10:02,580 --> 00:10:07,350
Then internally they create re-act out development server goes through a little process that says OK

158
00:10:07,680 --> 00:10:13,900
do I have anything special for the route of slash page to burst it checks to see if there are any development

159
00:10:13,900 --> 00:10:20,250
servers with that name like any development resources with the name of page 2.

160
00:10:20,280 --> 00:10:24,390
Now what I mean by that right there is if you actually go back over to your application and open up

161
00:10:24,390 --> 00:10:29,400
your network request log and then refreshed the page you'll see a list of all these development resources

162
00:10:29,400 --> 00:10:30,220
right here.

163
00:10:30,270 --> 00:10:32,960
For example you see a bundled not just file.

164
00:10:32,970 --> 00:10:39,870
So if we make a request to close three 3000 slash static slash slash bundled Yes we get back a javascript

165
00:10:39,870 --> 00:10:42,930
file with all of our javascript code inside of it.

166
00:10:42,930 --> 00:10:48,030
And so there are some routes defined on this server that are going to respond with some development

167
00:10:48,040 --> 00:10:53,900
resources like a CSSA file or a javascript file or whatever else it might be.

168
00:10:54,000 --> 00:10:59,060
But if we do not have any development resource with that given pathname then react to create re-act

169
00:10:59,090 --> 00:11:01,220
out dev server is going to move on to the next step.

170
00:11:01,410 --> 00:11:06,270
So the next step is it's going to check the public directory and see if there are any files with that

171
00:11:06,270 --> 00:11:13,220
given name like the name page to so if you recall inside of our project directory we have that public

172
00:11:13,220 --> 00:11:18,080
folder with a bunch of different files inside there so we can access all these files right here very

173
00:11:18,080 --> 00:11:21,690
easily by making a request to localhost 3000 slash.

174
00:11:21,830 --> 00:11:23,110
And then the file name.

175
00:11:23,120 --> 00:11:31,460
So for example I could go to local history thousand slash Fab.com and ICAO NLC the Advocaat appear likewise.

176
00:11:31,700 --> 00:11:36,810
I can also try to access the other file inside they're called the manifest chase on file and I see that

177
00:11:36,810 --> 00:11:38,940
case on file appear as well.

178
00:11:38,960 --> 00:11:43,820
So there are some very special names that we can access on our development server or some very special

179
00:11:43,820 --> 00:11:44,560
routes.

180
00:11:44,780 --> 00:11:48,660
But in this case we have nothing defined for the route of page 2.

181
00:11:49,040 --> 00:11:50,900
So this is the important step right here.

182
00:11:50,900 --> 00:11:57,520
This is the absolute critical step for you to understand unlike a traditional server unlike the Trishul

183
00:11:57,530 --> 00:11:58,760
server back over here.

184
00:11:58,970 --> 00:12:06,380
If you ask your development server for some resource that some route that is not defined rather then

185
00:12:06,380 --> 00:12:11,990
returning a 404 error the re-act out dev server is going to respond with your index.

186
00:12:12,020 --> 00:12:17,840
Each e-mail file and that is the total key to how all of this browser router stuff works.

187
00:12:17,840 --> 00:12:26,090
The absolute key to how it works if you ask for any route whatsoever the re-active server is going to

188
00:12:26,120 --> 00:12:28,000
always respond with the index.

189
00:12:28,060 --> 00:12:31,850
HTL file as opposed to returning a 4 0 for error.

190
00:12:32,120 --> 00:12:33,890
Now why is that so important.

191
00:12:34,160 --> 00:12:39,920
Well it's really important because all of our definitions are stuffed into the javascript or the client

192
00:12:39,920 --> 00:12:41,480
side of our application.

193
00:12:41,480 --> 00:12:47,000
Again the server does not know what to do with the path of splash page 2.

194
00:12:47,120 --> 00:12:52,400
So when a user goes over to our application and they click on this link right here to navigate over

195
00:12:52,400 --> 00:12:58,820
to page 2 and we refresh the page we are making a request to our server for the route slash page to

196
00:12:59,290 --> 00:13:00,470
and our re-active server.

197
00:13:00,470 --> 00:13:04,730
If you click on that request and then click on response right here it decides to just automatically

198
00:13:04,730 --> 00:13:06,620
return the team mail file.

199
00:13:06,650 --> 00:13:07,350
Or the index.

200
00:13:07,400 --> 00:13:09,020
Ational file.

201
00:13:09,020 --> 00:13:14,090
And so what happens after that is the browser loads up all that H.T. mail it sees that there is a link

202
00:13:14,150 --> 00:13:20,000
inside of your free bundled jazz file that is the file that contains all of our applications code.

203
00:13:20,000 --> 00:13:26,290
So our application then loads up re-act router loads up the history object that is created by the road

204
00:13:26,750 --> 00:13:30,260
by the browser router inspects the current Ural right here.

205
00:13:30,260 --> 00:13:36,450
It seems that we are out the route of splash page to the history object tells the browser router that

206
00:13:36,450 --> 00:13:41,580
we are at splash page 2 and the browser router tells both the routes right here hey we were at splash

207
00:13:41,580 --> 00:13:44,310
page to surrender yourself appropriately.

208
00:13:45,420 --> 00:13:48,300
So that is what is going on behind the scenes with the browser router.

209
00:13:48,300 --> 00:13:54,870
Now the reason I say that this is the most complicated to set up is that this mechanism of always responding

210
00:13:54,870 --> 00:14:01,890
with the HMO file if the route is undefined is not typical in any traditional server that you're ever

211
00:14:01,890 --> 00:14:07,380
going to work on if you're not making use of some like applications specifically set up for a single

212
00:14:07,380 --> 00:14:08,550
page application.

213
00:14:08,640 --> 00:14:13,950
The default behavior for every server in the world is that if you ask for some route that does not exist

214
00:14:14,190 --> 00:14:16,110
you respond with a 404.

215
00:14:16,530 --> 00:14:21,420
If that was the case with our re-act development server we would not be able to use the browser router

216
00:14:21,450 --> 00:14:27,570
because as soon as you and I typed in a route appear of localhost slash page two that is not a route

217
00:14:27,570 --> 00:14:28,980
that is handled by the development server.

218
00:14:28,980 --> 00:14:33,060
So we would get a 404 error that says sorry that route is not defined.

219
00:14:33,480 --> 00:14:39,060
So that's why it is so challenging to set up or deploy a application that makes use of the browser router

220
00:14:39,090 --> 00:14:44,730
you have to make sure that your server is configured in this identical fashion.

221
00:14:44,800 --> 00:14:49,480
You have to make sure that rather than responding with a 404 if you get some route that you don't know

222
00:14:49,480 --> 00:14:53,650
about your server is going to instead respond with the index on each e-mail file.

223
00:14:53,650 --> 00:14:58,660
That is the part that gets people in trouble when they tried to deploy an application using a browser

224
00:14:58,780 --> 00:15:00,530
router.

225
00:15:00,530 --> 00:15:00,950
All right.

226
00:15:00,950 --> 00:15:05,660
So hopefully that makes a bit more sense at the very minimum at this point you don't really need to

227
00:15:05,660 --> 00:15:07,510
understand like the big details here.

228
00:15:07,520 --> 00:15:11,690
I just want you to understand that when you try to deploy your own application you might end up seeing

229
00:15:11,690 --> 00:15:16,880
an error saying like hey I don't know what route slash page 2 is and that's going to be thrown by your

230
00:15:16,880 --> 00:15:17,280
server.

231
00:15:17,300 --> 00:15:21,470
And the reason you're going to see that ere is because you have not configured it appropriately to work

232
00:15:21,470 --> 00:15:23,680
with the browser router.

233
00:15:23,690 --> 00:15:24,320
All right.

234
00:15:24,320 --> 00:15:25,660
So that's Bressler router.

235
00:15:25,670 --> 00:15:30,790
Now very quickly I want to tell you about the hash router and why we would ever use that.

236
00:15:30,800 --> 00:15:35,280
The reason that we use hash router is very similar to this entire system that we just described.

237
00:15:35,360 --> 00:15:40,970
You know this entire concept of making sure we return an index that each HTML file with the hash Roder

238
00:15:42,200 --> 00:15:47,620
you're supposed to be setting up your back and server to not take a look at anything after the hash.

239
00:15:47,750 --> 00:15:53,870
As a matter of fact I think if we try right now to navigate to like say local host Pound's splash page

240
00:15:53,870 --> 00:16:00,430
to yeah when I navigate over there take a look at the request that is made right here like you can inspect

241
00:16:00,430 --> 00:16:05,100
the local host request and click on headers and if you look at this request right here you're going

242
00:16:05,100 --> 00:16:11,180
to see that there's basically nothing inside here that makes any mention to the splash page 2.

243
00:16:11,340 --> 00:16:16,980
So the reason that we use a hash router is that we can make requests to always localhost three thousand

244
00:16:17,190 --> 00:16:21,620
and we can configure the route local those 3000 slash to always return our index.

245
00:16:21,730 --> 00:16:26,140
Single file and our server should not look at anything after the hash.

246
00:16:26,150 --> 00:16:29,720
The hashes only for use by the client or by the browser.

247
00:16:30,020 --> 00:16:35,280
And so you can say that if anyone ever makes requests to localhost 3000 you're always going to respond

248
00:16:35,370 --> 00:16:36,120
with the index.

249
00:16:36,150 --> 00:16:41,520
HGL file and then when your application loads up your application will then look at whatever is after

250
00:16:41,520 --> 00:16:46,050
the hash and then use that to determine what content to show on the screen.

251
00:16:46,050 --> 00:16:50,790
So essentially a hash router is a lot more flexible because it does not require special configuration

252
00:16:50,970 --> 00:16:52,180
by your back and server.

253
00:16:52,200 --> 00:16:55,480
You can just have a single HTL file at a single route.

254
00:16:55,650 --> 00:16:58,360
You can always make requests to exactly that route.

255
00:16:58,440 --> 00:17:03,120
And then when the application actually lifts up re-act router is going to look at only whatever is after

256
00:17:03,120 --> 00:17:05,700
the hash to decide what to show on the screen.

257
00:17:05,790 --> 00:17:11,580
Now a very good example of when to use a hash router is if you are doing a deployment to get help pages

258
00:17:11,850 --> 00:17:17,700
get how pages does not allow you to do any type of special logic that says hey just go ahead and always

259
00:17:17,700 --> 00:17:20,470
return the index on each e-mail file instead.

260
00:17:20,570 --> 00:17:24,790
Good how pages is always going to expect that you make a request to some defined resource.

261
00:17:24,790 --> 00:17:29,010
And so if you were defining or something if you're deploying every application to get how pages you

262
00:17:29,010 --> 00:17:33,750
can say oh yeah I just come to like my get help pages link and then you can put whatever special path

263
00:17:33,780 --> 00:17:37,480
you have inside of the hash over here and react router.

264
00:17:37,560 --> 00:17:41,130
It's not just me the server is not going to care about whatever is after the hash.

265
00:17:41,130 --> 00:17:44,430
Now I know that example right there I don't have any good diagrams to show you to explain why that is

266
00:17:44,430 --> 00:17:49,800
the case but hopefully later on when we talk about deployment we will get an opportunity to deploy to

267
00:17:49,800 --> 00:17:54,570
get her pages and I'll be able to show you that hash rudder in action and show you exactly why we care

268
00:17:54,570 --> 00:17:56,720
about it and how it solves that particular issue.

269
00:17:56,750 --> 00:17:56,980
OK.

270
00:17:57,000 --> 00:17:58,940
I think this video has gone on long enough.

271
00:17:58,950 --> 00:18:01,210
I hope that I've given you at least something to think about.

272
00:18:01,230 --> 00:18:05,110
When you start going through deployment again all you really need to understand is that when you try

273
00:18:05,110 --> 00:18:10,860
to deploy a browser router if you start to get error messages saying this route is not defined chances

274
00:18:10,860 --> 00:18:12,900
are your server is not set up correctly.

275
00:18:13,080 --> 00:18:17,370
So let's take a pause right here and we'll continue and get back on track in the next video.