1
00:00:00,420 --> 00:00:07,020
Nice work so far and all set up the reactor router, because if you take a look at the complete application,

2
00:00:07,410 --> 00:00:10,070
you'll notice that we have the homepage more.

3
00:00:10,080 --> 00:00:13,620
Of course, we have the search form and we display the movies.

4
00:00:14,010 --> 00:00:19,740
But then in order to display that one specific movie, we set up a separate page.

5
00:00:20,130 --> 00:00:28,410
So if I never get here, notice how many oil changes and I just navigate to the specific page that displays

6
00:00:28,410 --> 00:00:31,490
info about that one movie.

7
00:00:31,800 --> 00:00:38,370
Now, keep in mind, you can think of this page as a placeholder because the idea is exactly the same

8
00:00:38,610 --> 00:00:40,440
where we have the same page here.

9
00:00:40,470 --> 00:00:48,410
Every time we open by clicking on a different movie, of course, we fetch data just about this movie.

10
00:00:48,780 --> 00:00:57,180
And I also promised you some time ago where I said that we can actually set up the router in the index.

11
00:00:57,540 --> 00:00:59,640
Now, we're not going to set up the switch and everything.

12
00:00:59,940 --> 00:01:06,810
But remember, when we work with React router, we import this browser router and then usually we come

13
00:01:06,810 --> 00:01:09,420
up with some kind of alias and that is router.

14
00:01:09,630 --> 00:01:13,070
And then we would want to wrap our application in that route.

15
00:01:13,440 --> 00:01:16,290
And usually we did that in Algiers.

16
00:01:16,470 --> 00:01:23,070
But I also mentioned that if you want if you don't want to have too many imports here in the objets,

17
00:01:23,460 --> 00:01:27,300
you can also do it in the index chart.

18
00:01:27,630 --> 00:01:34,680
So in this case, notice how we're importing the browser, has a router from react and on in between

19
00:01:34,680 --> 00:01:40,920
the provider and app because there's still some things that I would want to access in or out or from

20
00:01:40,920 --> 00:01:42,050
the app provider.

21
00:01:42,360 --> 00:01:49,220
I'm going to go with my router and then I'll wrap my up component so we save it.

22
00:01:49,560 --> 00:01:54,150
And then of course now would want to navigate Argyris, where I have two things.

23
00:01:54,600 --> 00:01:58,700
I have imported the switch component as well as the root.

24
00:01:59,130 --> 00:02:06,120
So now here when it comes to the app, of course I would want to return a switch component instead.

25
00:02:06,420 --> 00:02:09,450
And then instead of the switch component, I have two routes.

26
00:02:09,750 --> 00:02:15,380
I have one for home and then I have one that is going to be used as the placeholder.

27
00:02:15,630 --> 00:02:18,780
So that's where I would want to display that single movie.

28
00:02:18,990 --> 00:02:22,300
And every time, of course, I'm just going to display different data.

29
00:02:22,560 --> 00:02:23,880
So we're going to go here without.

30
00:02:24,880 --> 00:02:31,810
Then as far as the path we're going to go with portside, but remember that it is going to match if

31
00:02:31,810 --> 00:02:37,690
we go to those movies, because at the moment we're pretty much matches with everything.

32
00:02:37,930 --> 00:02:39,990
And that's why I have that exact problem.

33
00:02:40,210 --> 00:02:45,700
So that way it only matches if we're actually going to the homepage.

34
00:02:46,000 --> 00:02:51,350
I'll close my route over here online instead of the route I decide.

35
00:02:51,370 --> 00:02:53,850
Well, what is going to be the component of that?

36
00:02:53,860 --> 00:02:55,720
I'll just play once we navigate to the home.

37
00:02:56,080 --> 00:02:58,150
And of course, I already have the home.

38
00:02:58,480 --> 00:02:59,020
Come on.

39
00:02:59,320 --> 00:03:01,060
And that's the one that I would want on display.

40
00:03:01,360 --> 00:03:03,460
So I'm going to go here with home.

41
00:03:03,880 --> 00:03:04,720
So I close it.

42
00:03:04,990 --> 00:03:10,880
And then, of course, I would want to set up that route, that is for all the movies.

43
00:03:11,110 --> 00:03:18,340
So once I click on the movie, I'll have that placeholder page and then I'll fetch data for that specific

44
00:03:18,340 --> 00:03:18,750
movie.

45
00:03:19,180 --> 00:03:22,570
And in that case, we're going to go with a world component.

46
00:03:23,680 --> 00:03:30,710
Then as far as the path, again, you can go forwards and on the parameter you would want in my capacity,

47
00:03:31,000 --> 00:03:36,320
but I'll also add movies that is just my preference where I go with forward slash movies.

48
00:03:36,640 --> 00:03:43,900
So that tells me, well, what is the page about in this case of is going to be about the movies and

49
00:03:43,900 --> 00:03:46,300
then I go with my Europe or Summer.

50
00:03:46,430 --> 00:03:49,660
Remember, you can name this whatever you want.

51
00:03:49,930 --> 00:03:53,070
This can be shake and bake or Uncle Bobby Marquez.

52
00:03:53,170 --> 00:03:55,030
I'm just going to go with Colen.

53
00:03:55,030 --> 00:04:01,570
And then I'd remember in that specific page, we'll just be able to access the value.

54
00:04:01,780 --> 00:04:05,380
The value is the one that we're looking for, how we call the key.

55
00:04:05,860 --> 00:04:10,690
It doesn't really matter online as far as what we would want to display in this case.

56
00:04:10,690 --> 00:04:12,600
We need to go with children.

57
00:04:13,000 --> 00:04:20,410
So that is according to react router documentation where we have children, Propp and then we just want

58
00:04:20,410 --> 00:04:24,230
to pass the component we would want to display in this case.

59
00:04:24,550 --> 00:04:29,350
Notice how I'm importing the single movie component and I just named it movie.

60
00:04:29,890 --> 00:04:37,540
So since it is default export, I went with a movie name here and once I'm done, I just need to close

61
00:04:37,540 --> 00:04:38,470
the Iraq component.

62
00:04:39,580 --> 00:04:47,540
And I should be in good shape where I have the homepage, but then if I navigate two movies online,

63
00:04:47,800 --> 00:04:52,930
some kind of whatever it is, because we're not putting anything, we should see the single movie.

64
00:04:53,320 --> 00:04:57,410
And yes, I need to say that I just skip the error page in this project.

65
00:04:57,730 --> 00:04:58,690
I didn't see the point.

66
00:04:58,690 --> 00:05:04,870
We have already covered it and it just seemed redundant, repeating something that we already have done

67
00:05:04,870 --> 00:05:05,250
before.

68
00:05:05,620 --> 00:05:07,440
If you want your error page.

69
00:05:07,690 --> 00:05:08,380
Please do so.

70
00:05:08,670 --> 00:05:15,190
Remember, we have covered that in the previous project and with our REACT router in place, I think

71
00:05:15,190 --> 00:05:17,470
we can start watching our movies.