1
00:00:00,260 --> 00:00:05,940
And once we have imported our pages now we're going to start setting up our rover and the way it works

2
00:00:06,000 --> 00:00:12,260
in react Rover down whatever page you'd want to display in our router.

3
00:00:12,330 --> 00:00:20,060
We would need to wrap it in the router so router essentially is going to wrap all around our application.

4
00:00:20,070 --> 00:00:22,900
Now you can also do the same thing within the next year.

5
00:00:22,920 --> 00:00:29,850
You could just import the browser router and then if you'd want to name it let's say you can use also

6
00:00:29,850 --> 00:00:33,410
the same name router and then just wrap around the app.

7
00:00:33,420 --> 00:00:36,860
However in our case we're just going to wrap it in our return.

8
00:00:36,930 --> 00:00:42,570
So instead of returning the heading One we're going to return our router and then we're going to place

9
00:00:42,600 --> 00:00:47,850
all the pages we would want to display in our application in that a router component.

10
00:00:47,850 --> 00:00:53,670
So like I said instead of having one we're going to have our router component and then we're going to

11
00:00:53,670 --> 00:00:55,620
place whatever pages we heard one.

12
00:00:55,760 --> 00:01:02,170
And we're gonna start very simply by displaying the home about as well as let's say a card.

13
00:01:02,790 --> 00:01:11,010
Because I would want to talk about the exact prop first and the way it works in the react router 5 instead

14
00:01:11,010 --> 00:01:13,200
of setting up a route component.

15
00:01:13,320 --> 00:01:19,590
And by the way I'm saying this because maybe some of you have work with react router for where when

16
00:01:19,590 --> 00:01:25,710
we were setting up the route in fact in order to show the component we use the prop and I believe the

17
00:01:25,770 --> 00:01:27,230
prop name was component.

18
00:01:27,370 --> 00:01:34,860
However in react a router down 5 what we're doing is we're using this route component to wrap around

19
00:01:34,890 --> 00:01:36,640
whatever page you want to display.

20
00:01:36,960 --> 00:01:42,370
So let's say if I would want to display the home page I'm first going to have my root components or

21
00:01:42,390 --> 00:01:44,880
not router a component but what component.

22
00:01:44,880 --> 00:01:49,750
And then within the real component I'm going to say what page I would want to display.

23
00:01:50,040 --> 00:01:53,560
So in my case I'm gonna go home again in the previous version.

24
00:01:53,610 --> 00:01:59,550
You did something like this where you had a route and then you had a component that was equal to whatever

25
00:01:59,550 --> 00:02:02,190
component you would want to display in this case.

26
00:02:02,190 --> 00:02:08,730
We still have the path parameter so we're still saying whatever the path is going to be for this particular

27
00:02:08,730 --> 00:02:09,390
component.

28
00:02:09,540 --> 00:02:15,960
But instead of placing it here within the prop of component we're placing within the actual component.

29
00:02:15,990 --> 00:02:18,270
So that's the reason where we have the path.

30
00:02:18,570 --> 00:02:23,730
And then for the home page we're going to have just forward slash that means whatever domain we have

31
00:02:24,000 --> 00:02:27,290
currently of course that would be let's say a local host 3000.

32
00:02:27,390 --> 00:02:29,840
But in general that could be any domain you have.

33
00:02:29,960 --> 00:02:34,960
And then we would want to display the homepage and now we're going to copy and paste it and we're going

34
00:02:34,960 --> 00:02:38,280
to do the same thing for the about as well as card.

35
00:02:38,700 --> 00:02:43,230
So let me select my route copy and paste it two times first I guess.

36
00:02:43,230 --> 00:02:50,640
Let's change the components let's say about and then also I'm going to have one for let's say car.

37
00:02:50,970 --> 00:02:53,860
And of course we also need to change the parts.

38
00:02:53,940 --> 00:02:56,320
Now the URLs can be whatever you'd want.

39
00:02:56,370 --> 00:03:01,830
So if you'd want to write a different you URL for the about page well you can definitely do it.

40
00:03:01,860 --> 00:03:08,490
But of course it makes a bit more sense that if you have the about page well then the name in the URL

41
00:03:08,490 --> 00:03:09,390
is also going to match.

42
00:03:09,690 --> 00:03:15,330
So in this case if the user navigates the forward slash about it then we're going to display the above

43
00:03:15,330 --> 00:03:15,940
page.

44
00:03:15,960 --> 00:03:18,660
And lastly we're going to do the same thing with the car.

45
00:03:18,670 --> 00:03:24,210
Now let me save it and you're going to notice something interesting that if let's say we're in a homepage.

46
00:03:24,270 --> 00:03:25,350
Everything is correct.

47
00:03:25,500 --> 00:03:27,270
We're just going to display the homepage.

48
00:03:27,390 --> 00:03:33,270
And again the reason why we see this heading one from hello from homepage well because that's the content

49
00:03:33,300 --> 00:03:36,030
we have currently within the homepage.

50
00:03:36,030 --> 00:03:37,770
Obviously later on we're going to have more.

51
00:03:37,770 --> 00:03:39,320
But currently that's all we have.

52
00:03:39,690 --> 00:03:45,410
But if let's say we're going to navigate to a boat Page Well there's going to be two things there's

53
00:03:45,420 --> 00:03:51,060
going to be hello from home page and then also we're going to have hello from about page.

54
00:03:51,100 --> 00:03:52,290
OK interesting.

55
00:03:52,290 --> 00:03:57,540
Now let's do the same thing with a card and as a side note yes we're going to set up our NAV bar a bit

56
00:03:57,540 --> 00:03:58,320
later.

57
00:03:58,320 --> 00:04:03,930
That's the reason why we're going to have to do a bit of navigating in our Euro bar and let's do the

58
00:04:03,930 --> 00:04:07,750
same thing and yes still we have hello from our bridge.

59
00:04:07,800 --> 00:04:10,570
And then also we have right away Hello from garbage.

60
00:04:10,590 --> 00:04:14,820
Now the cart page is correct but why do we have this homepage here.

61
00:04:14,820 --> 00:04:15,660
Well let's think about it.

62
00:04:16,050 --> 00:04:18,550
So we have the path right.

63
00:04:18,570 --> 00:04:19,380
And then what is the path.

64
00:04:19,380 --> 00:04:20,920
Well that is the forward slash.

65
00:04:21,120 --> 00:04:24,950
Then I have the forward slash in about and then I have forward slash and cart.

66
00:04:24,960 --> 00:04:31,620
And what happens is that this around the path actually matches because it says OK so where are you would

67
00:04:31,620 --> 00:04:33,060
want to go forward slash.

68
00:04:33,060 --> 00:04:35,160
And then in this case we're just adding the about.

69
00:04:35,310 --> 00:04:38,890
So both of them match if we're heading over to a ball.

70
00:04:38,910 --> 00:04:45,330
So in order to get rid of the home page when we're let's say navigating to a cart page or about page

71
00:04:45,690 --> 00:04:47,910
we need to have this exact problem.

72
00:04:48,330 --> 00:04:54,100
So on the root component we can set up a exact prop.

73
00:04:54,210 --> 00:04:59,020
And that way we're only going to display that particular page if the path.

74
00:04:59,030 --> 00:05:01,310
Exactly it's not just.

75
00:05:01,310 --> 00:05:01,610
Okay.

76
00:05:01,640 --> 00:05:02,940
So we have forward slash.

77
00:05:02,940 --> 00:05:08,690
Okay fine I'm just going to render the page whatever has this forward slash and then if let's say we're

78
00:05:08,690 --> 00:05:09,860
gonna have the card as well.

79
00:05:09,860 --> 00:05:11,600
Well then I'm going to render both.

80
00:05:11,610 --> 00:05:17,550
No in this case we're only checking for the exact match for our fourth.

81
00:05:17,690 --> 00:05:21,610
So only if we have the forward slash then we're going to display the homepage.

82
00:05:21,740 --> 00:05:27,770
If the route is different if the path is let's say about then we're going to display the about page

83
00:05:28,070 --> 00:05:30,700
and the same would work with a cart page as well.

84
00:05:30,770 --> 00:05:36,020
So that's how we can set up a very very basic router using react router Dom.