1
00:00:00,720 --> 00:00:05,070
In the last section we played around with re-act router a little bit and got more familiar with the

2
00:00:05,070 --> 00:00:07,860
browser router and route components.

3
00:00:07,950 --> 00:00:12,700
Remember the route components provide some amount of configuration to react router.

4
00:00:12,990 --> 00:00:19,830
They tie a component that we create to a particular route or path that a user might visit inside of

5
00:00:19,830 --> 00:00:23,310
our application in our particular case.

6
00:00:23,410 --> 00:00:29,320
We created the path hello and said whenever a user goes there I want to show the hello component on

7
00:00:29,320 --> 00:00:36,100
the screen and then we do the exact same thing for a path of goodbye and the goodbye component as well.

8
00:00:36,130 --> 00:00:40,240
One thing that I want to point out to you as one mentioned this to be 100 percent clear the name of

9
00:00:40,240 --> 00:00:44,870
the path that we create does not have to match the component name as well.

10
00:00:45,130 --> 00:00:49,840
So we don't have to take the component name and just make it lower case and use it as a path right here.

11
00:00:49,870 --> 00:00:58,150
We could have just as easily said one two three four five four Hello route or ab cd absolutely anything

12
00:00:58,150 --> 00:00:59,390
we could possibly imagine.

13
00:00:59,410 --> 00:01:06,140
So there's really no tie whatsoever between the component name and the pathname that we choose.

14
00:01:06,520 --> 00:01:10,220
Now that we have it it had a chance to play around with the rock component a little bit.

15
00:01:10,240 --> 00:01:15,390
Let's figure out how we're going to use re-act router inside of our particular application.

16
00:01:15,460 --> 00:01:20,130
So I want to think about the different routes that our application might need.

17
00:01:20,400 --> 00:01:21,560
Take a look at a diagram.

18
00:01:21,570 --> 00:01:24,080
It's going to help us figure out what we're going to do here.

19
00:01:24,740 --> 00:01:25,100
OK.

20
00:01:25,120 --> 00:01:30,520
So here's the first page the page where a user is going to see a list of all their different blog posts

21
00:01:30,580 --> 00:01:32,650
appear on the screen.

22
00:01:32,650 --> 00:01:37,840
So we had said that this was going to be the route route or the home route of our application.

23
00:01:37,930 --> 00:01:46,690
So presumably if a user goes to say my blog dot com this would be the page that they first see appear

24
00:01:46,690 --> 00:01:47,780
on the screen.

25
00:01:47,950 --> 00:01:54,400
So do notice that when you go to my blog dot com that's really interpreted as a route that has only

26
00:01:54,400 --> 00:01:56,970
the character slash inside of it.

27
00:01:57,010 --> 00:02:02,920
And so when we previously had on here just slash by itself that's really meant to indicate this is the

28
00:02:02,920 --> 00:02:06,890
home route or the route route of our application.

29
00:02:06,910 --> 00:02:12,850
Now we can easily imagine that to make a component like this that shows a list of posts we might make

30
00:02:12,850 --> 00:02:18,460
a component called something like post index or post list or something like that.

31
00:02:18,460 --> 00:02:22,690
Right that's I can imagine making a reactor component like that there would be in charge of showing

32
00:02:22,690 --> 00:02:25,280
the list of posts on the screen to the user.

33
00:02:25,720 --> 00:02:32,770
So if we imagine we have a component called like posts index or post list and we want to match that

34
00:02:32,800 --> 00:02:39,880
or show that to the user when ever the user goes to the route just slash we might end up with a route

35
00:02:39,880 --> 00:02:43,560
component that looks a little something like this.

36
00:02:43,870 --> 00:02:51,160
So we might place a component that has a path of just slash by itself and then a component called something

37
00:02:51,160 --> 00:02:52,900
like post index.

38
00:02:53,050 --> 00:02:57,870
And that will be responsible for fetching a list of posts and showing them all to the user.

39
00:02:57,880 --> 00:03:02,740
So I think that this will very likely be one route that we at inside of our application maybe the first

40
00:03:02,740 --> 00:03:07,560
route or the first route that we showed to the user when they visit our page.

41
00:03:07,570 --> 00:03:11,680
Let's now check out the other two pages and think about the different route components that will create

42
00:03:11,680 --> 00:03:15,740
for those in this grill and over a little bit.

43
00:03:16,260 --> 00:03:16,970
OK.

44
00:03:18,090 --> 00:03:23,640
So next is the route that or the component I should say that we show to a user when they're attempting

45
00:03:23,640 --> 00:03:27,860
to look at details about a very particular post.

46
00:03:27,870 --> 00:03:34,860
So for this one we had said that we might have a U or L or a path or something like post slash 5 where

47
00:03:34,860 --> 00:03:39,330
five was the ID of the post that the user was attempting to look at.

48
00:03:39,330 --> 00:03:44,240
Now this one is a little bit more challenging because we are clearly saying that there's kind of a wild

49
00:03:44,240 --> 00:03:46,500
card inside this router right here.

50
00:03:46,650 --> 00:03:51,660
Right we don't want to have to create like 10000 different route components inside of our application

51
00:03:51,690 --> 00:03:59,050
and say make one route for post slash 1 and post slash 2 and post slash 3 post-blast 4 and so on.

52
00:03:59,100 --> 00:04:05,400
Really we want to just put together one single post definition or route definition and say that this

53
00:04:05,400 --> 00:04:10,130
part of the UL you are l right here is really a variable or kind of a wildcard.

54
00:04:10,170 --> 00:04:17,040
So if we ever see the user trying to access a route that looks something like post slash anything anything

55
00:04:17,040 --> 00:04:20,670
at all then I want to show this component on the screen.

56
00:04:20,670 --> 00:04:23,670
And so of course re-act router does have support for this.

57
00:04:23,860 --> 00:04:28,170
So this kind of thing about what type of route configuration we might set up.

58
00:04:28,380 --> 00:04:36,270
Maybe you look something like this we might make a route component that has a path of post slash and

59
00:04:36,270 --> 00:04:38,870
then we added in a little wild card right here.

60
00:04:38,940 --> 00:04:46,320
So the wildcard is Colin ID by putting in Colan ID or specifically just the colon that tells re-act

61
00:04:46,320 --> 00:04:50,500
router to be kind of a fuzzy match or kind of a wildcard.

62
00:04:50,550 --> 00:04:56,580
So if the user tries to go to post slash one or post-blast two three four whatever it might be reactor

63
00:04:56,580 --> 00:05:02,790
order is going consider that Slash one or slashed two to be a wild card and it's going to try to greedily

64
00:05:02,790 --> 00:05:07,130
match that route against this component right here.

65
00:05:07,170 --> 00:05:11,970
So if a user ever goes out like that we'll show them a component that we're going to call something

66
00:05:11,970 --> 00:05:13,260
like post show.

67
00:05:13,530 --> 00:05:14,630
I think that makes sense.

68
00:05:14,640 --> 00:05:20,970
POSSO is a component to be responsible for fetching a very particular component and showing me a very

69
00:05:20,970 --> 00:05:23,650
particular post and showing it on the screen.

70
00:05:24,090 --> 00:05:26,330
Now think about the very last route that we have.

71
00:05:28,090 --> 00:05:33,730
So the last route is all about showing or showing a component to the user that they can use to create

72
00:05:33,760 --> 00:05:35,540
a brand new post.

73
00:05:35,580 --> 00:05:40,770
And so for this we had previously said that we might have a route of something like post slash new.

74
00:05:41,050 --> 00:05:46,300
And so this is another somewhat easy one you can kind of think of a route that looks a little something

75
00:05:46,300 --> 00:05:47,500
like this.

76
00:05:47,640 --> 00:05:53,260
So we'll make our route component and we'll say whatever the user attempts to visit the path PPO's slash

77
00:05:53,260 --> 00:05:53,910
new.

78
00:05:54,100 --> 00:05:57,820
Let's show this post new component to the user on the screen.

79
00:05:58,710 --> 00:05:59,100
OK.

80
00:05:59,140 --> 00:06:03,580
So in this section we talk and we've spoken about the three different routes that I think that we're

81
00:06:03,580 --> 00:06:05,920
going to need inside of our application.

82
00:06:05,950 --> 00:06:17,170
We're going to have a route for post slash new route for post slash wild card and then just slash by

83
00:06:17,170 --> 00:06:21,340
itself which is serving the route route of our application.

84
00:06:21,370 --> 00:06:26,950
Now we've got a better idea of the general architecture and structure of our router inside of our application.

85
00:06:26,950 --> 00:06:30,090
Let's dive back into the implementation in the next section.