1
00:00:00,780 --> 00:00:04,980
In the last section we installed re-act router and we're not going to take a little bit of time to discuss

2
00:00:04,980 --> 00:00:07,740
exactly what it's going to do for us.

3
00:00:07,740 --> 00:00:10,890
I want to start off by not really discussing react router at all.

4
00:00:10,890 --> 00:00:14,520
I want to first talk to you about how the web used to work.

5
00:00:14,520 --> 00:00:16,020
So how did web pages work.

6
00:00:16,020 --> 00:00:22,000
Back in the 1990s in the early 2000s and even parts of early 20.

7
00:00:22,050 --> 00:00:26,970
I suppose what we call it now is this how the web used to work and large parts of it.

8
00:00:26,980 --> 00:00:27,560
Let me be clear.

9
00:00:27,570 --> 00:00:34,080
Still do this exact same way a user sitting inside their browser and they see some link on the page

10
00:00:34,120 --> 00:00:35,770
like an anchor tag right.

11
00:00:35,790 --> 00:00:39,390
They see some link on the page and they say oh that looks like an interesting link.

12
00:00:39,410 --> 00:00:43,440
I'm going to click that link and go to that new document.

13
00:00:43,440 --> 00:00:47,790
So essentially the user is changing the URL inside their browser.

14
00:00:48,150 --> 00:00:54,030
When the user clicks on the link that issues traditionally say traditionally it issues a new request

15
00:00:54,360 --> 00:00:57,520
for some new web page from some remote server.

16
00:00:57,900 --> 00:01:03,460
So the user might say click on a link that goes to Google dot com that reaches out to Google dot com

17
00:01:03,720 --> 00:01:11,070
grab some HTL document from some server and that each document is sent back to the user's browser where

18
00:01:11,180 --> 00:01:14,380
the document then appears on the screen.

19
00:01:14,400 --> 00:01:21,280
The purpose of re-act router is to completely circumvent this process right here with re-act router.

20
00:01:21,300 --> 00:01:27,990
We are no longer making requests to our server to get a web page receiving a web page back and then

21
00:01:27,990 --> 00:01:34,070
showing that page to the user instead re-act router intercepts changes to the u r l.

22
00:01:34,140 --> 00:01:37,710
It says Oh I see the user is trying to navigate to a different L.

23
00:01:37,760 --> 00:01:42,020
I'm going to I'm going to stop that the user from navigating to different page.

24
00:01:42,150 --> 00:01:48,390
And instead I'm going to manually look at the URL and I'm going to decide to display a different set

25
00:01:48,420 --> 00:01:52,410
of components on the screen based on what that New York URL is.

26
00:01:52,410 --> 00:01:58,180
So let's kind of walk through that flow let's get a better idea of how that works in great great detail.

27
00:01:59,430 --> 00:01:59,810
OK.

28
00:01:59,850 --> 00:02:04,950
So here's what's going to go on behind the scenes when we're using re-act router instead of traditional

29
00:02:04,950 --> 00:02:07,610
web application navigation.

30
00:02:07,620 --> 00:02:12,970
So in this world we also make use of a package called history.

31
00:02:13,020 --> 00:02:16,460
Now we don't actually have to set up this history package ourselves.

32
00:02:16,500 --> 00:02:20,690
It was automatically installed for us when we installed re-act router.

33
00:02:20,790 --> 00:02:24,420
So history is already going to be running behind the scenes for us.

34
00:02:24,420 --> 00:02:28,190
And I only put on this diagram to just kind of let you know that it exists.

35
00:02:28,520 --> 00:02:28,760
OK.

36
00:02:28,770 --> 00:02:30,630
So let's walk through this diagram now.

37
00:02:30,820 --> 00:02:36,150
So let's say again that the user sees some interesting link on the page and they say oh looks like an

38
00:02:36,150 --> 00:02:40,590
interesting link like your might be then clicking on the button that says Create a new post.

39
00:02:40,620 --> 00:02:44,470
Or they might be attempting to look at a very particular post.

40
00:02:44,490 --> 00:02:49,620
So let's just imagine that the user clicks on some link that's going to change the URL inside their

41
00:02:49,620 --> 00:02:51,120
browser.

42
00:02:51,120 --> 00:02:57,190
When that happens the browser says to the History Library hey the user just changed the URL.

43
00:02:57,240 --> 00:02:58,730
Here's the new your your l.

44
00:02:58,740 --> 00:03:00,510
Here's the new one that they're trying to visit.

45
00:03:00,540 --> 00:03:06,480
The new route that they are attempting to go to the history library takes that new change to you or

46
00:03:06,480 --> 00:03:06,850
else.

47
00:03:06,990 --> 00:03:12,690
It does some parsing over it and figures out exactly what changed about the R L and then it passes it

48
00:03:12,690 --> 00:03:14,890
on to the re-act router library.

49
00:03:15,150 --> 00:03:22,460
So history is communicating this new route over to react router reactor routers going to receive that

50
00:03:22,460 --> 00:03:28,970
new route and it's going to decide to show a new set of components on the screen based on exactly what

51
00:03:28,970 --> 00:03:35,810
that new route is our place in this whole process right here is to set up that configuration inside

52
00:03:35,810 --> 00:03:37,010
of re-act router.

53
00:03:37,010 --> 00:03:42,170
So we're going to be writing the code that says hey react router if you are l looks like this.

54
00:03:42,220 --> 00:03:44,760
And I want you to show this component.

55
00:03:44,900 --> 00:03:50,330
If it looks like that that I want you to show that component so that some configuration that we're going

56
00:03:50,330 --> 00:03:57,230
to be creating manually and passing to react router once re-act router has decided what set of components

57
00:03:57,230 --> 00:04:02,540
to display on the screen based on the L. It's going to say to react Hey react.

58
00:04:02,540 --> 00:04:05,940
It looks like we've got a new set of components to show on the screen please.

59
00:04:05,940 --> 00:04:11,790
Re rendering yourself or render all the components that are visible based on this new set of components.

60
00:04:12,040 --> 00:04:18,440
So it passes or delegates off to react react takes over says OK I guess these are the new components

61
00:04:18,440 --> 00:04:23,720
we're going to display and it renders them onto the screen as content and then just kind of sits around

62
00:04:23,720 --> 00:04:27,740
and waits for the user to change the URL again.

63
00:04:27,770 --> 00:04:33,590
So this entire architecture that we're looking at right here is the idea behind single page applications

64
00:04:33,620 --> 00:04:35,960
or espies or spa's.

65
00:04:36,100 --> 00:04:38,880
I hear them called those terms interchangeably.

66
00:04:38,930 --> 00:04:46,520
The idea behind a single page application is that we are no longer navigating between distinct HTL documents

67
00:04:46,520 --> 00:04:49,470
that are being created by some remote web server.

68
00:04:49,880 --> 00:04:57,950
Instead we're always dealing with a single HMO document and we are relying upon some javascript to change

69
00:04:57,950 --> 00:05:02,220
the set of components that a user sees appearing on the screen.

70
00:05:02,480 --> 00:05:08,570
So in practice it's really quite interesting to think about it user only ever loads a single small document

71
00:05:08,810 --> 00:05:13,790
and we're really just kind of tricking the user into thinking that they actually are navigating to other

72
00:05:13,790 --> 00:05:18,540
pages when in fact we're just showing them different sets of components.

73
00:05:19,050 --> 00:05:19,430
OK.

74
00:05:19,460 --> 00:05:24,260
So now we've got at least a better idea somewhat of what re-act rodders going to be doing for us.

75
00:05:24,260 --> 00:05:28,760
Remember it's going to take an input you are l and it's going to decide what component to show on the

76
00:05:28,760 --> 00:05:29,430
screen.

77
00:05:29,630 --> 00:05:31,970
Now we've got a better idea of exactly how that works.

78
00:05:32,090 --> 00:05:35,390
Let's start making use of re-act router inside the next section.