1
00:00:00,080 --> 00:00:03,810
And in order to set up React router first we need to install it.

2
00:00:03,830 --> 00:00:10,670
So if you want to set it up in your own project, you'll need to go with NPM I and then react router

3
00:00:10,670 --> 00:00:12,290
dom in the Readme.

4
00:00:12,320 --> 00:00:19,430
I left the specific version, but of course in your case you can just go with npm I and react router

5
00:00:19,430 --> 00:00:19,940
dom.

6
00:00:20,030 --> 00:00:26,570
And once you have the package in place, you'll want to navigate to your root component, which in our

7
00:00:26,570 --> 00:00:32,780
case is app, JSX and set up create browser, router and root provider.

8
00:00:32,780 --> 00:00:34,250
So let's do it together.

9
00:00:34,340 --> 00:00:36,410
We're going to navigate to app js.

10
00:00:37,160 --> 00:00:44,150
I'll close the sidebar just so we have more real estate and we're looking for create browser, router

11
00:00:44,150 --> 00:00:46,460
and router provider and you're not.

12
00:00:46,460 --> 00:00:50,450
In this case, I'll try to rely on the auto import.

13
00:00:50,450 --> 00:00:55,970
So notice that's the function we're looking for and we want to set it up to some kind of variable.

14
00:00:55,970 --> 00:00:57,680
In my case, I'm going to go with the router.

15
00:00:57,710 --> 00:01:04,319
It's a function and inside of the function we pass in the array and then inside of the array.

16
00:01:04,319 --> 00:01:07,680
Each and every route is going to be an object.

17
00:01:07,680 --> 00:01:10,740
And we'll start with these two properties.

18
00:01:10,740 --> 00:01:12,960
But of course eventually there's going to be more.

19
00:01:12,960 --> 00:01:20,850
So we have path effectively this just controls what are we going to display once we navigate to a specific

20
00:01:20,880 --> 00:01:21,600
URL?

21
00:01:21,870 --> 00:01:27,120
And it's a common practice to go with forward slash, which means the domain.

22
00:01:27,120 --> 00:01:33,080
So in our case it's localhost 5173 essentially that's my home page.

23
00:01:33,090 --> 00:01:37,800
Now once we deploy it, of course that domain is going to be different.

24
00:01:37,800 --> 00:01:40,920
But again, this forward slash means home page.

25
00:01:40,920 --> 00:01:42,420
And what do we want to display?

26
00:01:42,420 --> 00:01:46,500
Well, eventually, of course, we'll have the components and all that cool stuff.

27
00:01:46,500 --> 00:01:54,120
For now, I can simply show you that we need to go with element property and I can provide here a heading

28
00:01:54,120 --> 00:01:54,690
one.

29
00:01:55,330 --> 00:01:59,560
So I'm going to go here with heading one and I'll just type home.

30
00:02:00,130 --> 00:02:04,030
Let's save this and let's copy and paste.

31
00:02:04,670 --> 00:02:06,890
And we're going to set up the second.

32
00:02:07,790 --> 00:02:08,220
Route.

33
00:02:08,310 --> 00:02:13,730
So in this case, I'm going to go to about Page and just to showcase that it's possible, of course,

34
00:02:13,730 --> 00:02:20,570
not only we can add a heading one, but we can go with Div and then maybe in there we'll place another

35
00:02:20,570 --> 00:02:21,650
heading one again.

36
00:02:21,650 --> 00:02:22,520
Sky's the limit.

37
00:02:22,520 --> 00:02:26,750
Please keep in mind that our pages are components so effectively there's no difference.

38
00:02:26,750 --> 00:02:33,320
So we have a typical react component and all of the pages are the same components.

39
00:02:33,320 --> 00:02:40,400
The difference of course, is that we just display that component once we navigate to the specific URL.

40
00:02:40,610 --> 00:02:44,060
In this case, it's going to be a home page and about page.

41
00:02:44,060 --> 00:02:45,200
So if.

42
00:02:46,000 --> 00:02:49,930
I want to display a content on forward slash about.

43
00:02:50,050 --> 00:02:54,430
I just add here a path forward slash about and then whatever.

44
00:02:55,390 --> 00:02:57,730
Element I want to display in this case.

45
00:02:57,730 --> 00:03:02,200
It's going to be an about page in a div, so let's save.

46
00:03:03,000 --> 00:03:09,150
And now we want to grab the router provider and return from App.

47
00:03:09,150 --> 00:03:14,640
So instead of this heading one again, I'm going to rely on the auto import.

48
00:03:14,640 --> 00:03:18,390
And the name of the component is router provider.

49
00:03:18,720 --> 00:03:21,840
It has a router prop.

50
00:03:21,840 --> 00:03:26,310
So that's a special prop that we have and we want to set it equal to what?

51
00:03:26,340 --> 00:03:29,760
Well, to our router instance, let's close it, let's save.

52
00:03:29,760 --> 00:03:32,400
And if everything is correct, we should have home.

53
00:03:32,400 --> 00:03:32,730
Why?

54
00:03:32,760 --> 00:03:34,260
Because this is our home page again.

55
00:03:34,260 --> 00:03:36,990
This is localhost 5173.

56
00:03:36,990 --> 00:03:40,050
And once we deploy, it's going to be our actual domain.

57
00:03:40,050 --> 00:03:47,490
Now if I go to my URL bar type forward slash and then about what do you think we're going to display

58
00:03:47,520 --> 00:03:49,650
of course the about page.

59
00:03:49,650 --> 00:03:57,990
So with this in place, we're done with our most basic router and next we can start covering more complex

60
00:03:57,990 --> 00:03:59,010
use cases.