1
00:00:00,860 --> 00:00:05,380
In the last video we put together a quick example it's re-act writer Dom and then tested it out inside

2
00:00:05,410 --> 00:00:06,330
of our browser.

3
00:00:06,460 --> 00:00:12,200
In this video to show you a couple of diagrams to help you understand exactly how re-act Rotterdam works.

4
00:00:12,190 --> 00:00:17,710
Now we very easily noticed that when we navigated to different roles inside of our browser we saw different

5
00:00:17,770 --> 00:00:23,530
content appear on the screen and it appeared to be depending upon the different route that we added

6
00:00:23,530 --> 00:00:24,730
into this you l.

7
00:00:24,910 --> 00:00:31,480
So if I went to local or 3000 I saw page one but if I went to localhost three thousand slash page two

8
00:00:31,540 --> 00:00:33,840
I saw some entirely different content.

9
00:00:33,850 --> 00:00:40,650
The first thing I want you to understand here is exactly what part of the L react router cares about.

10
00:00:40,690 --> 00:00:41,050
All right.

11
00:00:41,050 --> 00:00:42,940
Quick diagram right here.

12
00:00:42,970 --> 00:00:49,290
So when you and I visit localhost 3000 and we type that address into our Ural it loads up our application

13
00:00:49,530 --> 00:00:53,300
but re-act router does not care about the entire Ural.

14
00:00:53,350 --> 00:00:59,200
In other words re-act router does not care that we went to a domain of local host or that we were at

15
00:00:59,200 --> 00:01:06,190
Port 3000 instead re-act router only cares about all the characters that are listed after the domain

16
00:01:06,190 --> 00:01:13,790
definition and the port definition localhost 3000 is interpreted as being localhost 3000 slash.

17
00:01:13,930 --> 00:01:17,930
Just the note that is a toll equivalent your L2 just local is 3000.

18
00:01:18,070 --> 00:01:22,710
That's a quick example if you flip back over and go to look almost 3000 slash.

19
00:01:22,750 --> 00:01:26,200
It still loads up our application.

20
00:01:26,240 --> 00:01:29,760
Now I've got a couple of other demonstrations or examples here on the screen.

21
00:01:29,960 --> 00:01:36,650
So if we go to localhost 3000 slash page one re-act router only cares about everything after the port

22
00:01:36,710 --> 00:01:40,810
and the domain to react Retter would only care about Flash page 1.

23
00:01:40,820 --> 00:01:47,300
Likewise if we went to say arean B.Com slash listing slash Spain re-act router would only consider slash

24
00:01:47,300 --> 00:01:48,360
listings slash.

25
00:01:48,380 --> 00:01:52,470
Spain when deciding what content to disappear to display on the screen.

26
00:01:52,850 --> 00:01:56,720
So with that in mind let's take a look at another diagram that's going to show you how this part of

27
00:01:56,720 --> 00:02:03,990
the domain that you're visiting or the Eurail that you're visiting is going to be used by re-act router.

28
00:02:03,990 --> 00:02:09,370
OK so when we created our application and loaded up inside the browser We created an instance of the

29
00:02:09,370 --> 00:02:15,460
browser router component the browser router internally creates an object of its own called The History

30
00:02:15,490 --> 00:02:21,880
object its history object is going to look at the inside of your address bar and its going to extract

31
00:02:21,970 --> 00:02:27,730
just that portion of the you that react rather curious about just everything after the domain name or

32
00:02:27,730 --> 00:02:28,420
the port.

33
00:02:28,540 --> 00:02:34,060
So just this portion that you see over here the history object is then going to communicate that path

34
00:02:34,300 --> 00:02:40,660
over to browser router and then browser router is then going to communicate that path down to both of

35
00:02:40,660 --> 00:02:42,610
your route components.

36
00:02:42,610 --> 00:02:48,490
The components are going to decide either to show themselves or height themselves depending upon the

37
00:02:48,490 --> 00:02:54,370
path inside of the Eurail that the user is visiting and the path property that was passed when it was

38
00:02:54,370 --> 00:02:55,100
created.

39
00:02:55,360 --> 00:03:02,130
So in other words when we visit localhost 3000 slash like so we have a path of Ford slashed by itself.

40
00:03:02,260 --> 00:03:08,690
And so as you might imagine we have a route right here with a path of forward slash the L and the path

41
00:03:08,690 --> 00:03:09,980
property right here match up.

42
00:03:10,100 --> 00:03:14,160
And so re-act router decides to show this route component on the screen.

43
00:03:14,180 --> 00:03:21,500
Likewise if we go to local those 3000 slash page two we now have a path inside of our Eurail of slash

44
00:03:21,530 --> 00:03:22,560
page 2.

45
00:03:22,610 --> 00:03:25,450
And so that is equal to the path property right here of page 2.

46
00:03:25,520 --> 00:03:29,030
And so we see this route component on the screen instead.

47
00:03:29,030 --> 00:03:34,190
Now that's a very simple demonstration or explanation of exactly how the path property works inside

48
00:03:34,190 --> 00:03:39,590
of re-act router but there are some real gotchas around that path property that are going to end up

49
00:03:39,590 --> 00:03:41,810
being quite frustrating for you in the future.

50
00:03:41,810 --> 00:03:43,690
So lets take a pause right here.

51
00:03:43,760 --> 00:03:48,230
When we come back the next section I'm going to show you some gotchas around this path Propp and we

52
00:03:48,230 --> 00:03:50,000
pass off to the route component.

53
00:03:50,000 --> 00:03:54,950
In some ways that might make you think that this is not quite working as you would expect.

54
00:03:54,950 --> 00:03:56,820
So quick pause and I'll see you in just a minute.