WEBVTT 00:01.220 --> 00:05.090 Okay let's talk about router in React. 00:05.090 --> 00:14.150 So what is router router decide on the page that we currently are react is a single page application 00:14.150 --> 00:22.040 framework that means we are always in the index page and we just replace the page based on the current 00:22.040 --> 00:22.880 context. 00:22.880 --> 00:30.500 So basically what we can do is we can decide, let's say we will have a few links and then we will click 00:30.500 --> 00:32.600 that link will go to another page. 00:32.600 --> 00:37.040 But in our case, it's not going to be another page, it might be another component. 00:37.040 --> 00:46.040 So to handle this we can use our router and there is no router built in React, so we will need to add 00:46.040 --> 00:48.980 it as a external library. 00:48.980 --> 00:55.370 So what I can do for now is I can close this footer and will stay with the App.js for now. 00:55.370 --> 00:57.110 So we have this display. 00:57.140 --> 01:00.080 Nothing has been changed and then I will stop my server. 01:00.080 --> 01:03.270 So we'll do control C the server has been stopped. 01:03.270 --> 01:13.470 You can see some messages here and what we will need to do is we need to add a router dom so npm install 01:13.470 --> 01:22.590 or you can do I in shortcut npm install and then we will do react router. 01:23.820 --> 01:24.330 Dom. 01:25.670 --> 01:26.480 Like that. 01:26.480 --> 01:32.390 So NPM space install space react router dash dom. 01:32.840 --> 01:42.830 And in here what we can do is we can add this dash dash save and I talked about it before and I will 01:42.830 --> 01:49.010 make some more space here and if you open this. 01:50.050 --> 01:52.350 Package.json as we have here. 01:52.360 --> 01:54.050 Dependencies here. 01:54.070 --> 01:56.860 This is what we already have installed. 01:56.860 --> 02:04.960 So npm install will add react router dom to this dependencies and this save is telling us. 02:04.960 --> 02:08.080 Okay, we would like to add it to the dependencies here. 02:08.080 --> 02:11.440 So what we can also do is we could go. 02:13.030 --> 02:13.750 Like that. 02:13.750 --> 02:19.750 So add it to our package Json, but inside dev dependencies at the moment we don't have any any dev 02:19.750 --> 02:25.060 dependencies here, so it will just create a new section and it will be added here. 02:25.060 --> 02:32.920 In our case we would like to add it inside our dependencies here, but since NPM version five, we don't 02:32.920 --> 02:38.050 need to do that safe flag anymore because by default it is added for us. 02:38.050 --> 02:45.250 So what I can do is just having NPM install and then name of the package I would like to install and 02:45.250 --> 02:53.470 then clicking enter and you can see this will be downloaded from the internet and then it will be installed 02:53.470 --> 02:58.750 within the node modules and also automatically it will be added in the dependencies. 03:04.510 --> 03:06.800 And you can see here that's been added. 03:06.820 --> 03:13.030 So we have this one version five added to our package Json. 03:13.030 --> 03:19.150 And I didn't have to do anything that's been done by for me automatically so I can close it. 03:19.150 --> 03:21.490 Actually, you don't even need to open this. 03:21.490 --> 03:27.880 I just had it open for you to see how it works, but normally you have it closed all the time and you 03:27.880 --> 03:30.010 don't need to worry about this at all. 03:30.580 --> 03:37.240 Okay, so once we have a new packet, what we can do is from that new package, we can import two things. 03:37.330 --> 03:38.860 So import. 03:42.680 --> 03:43.310 Crowd. 03:45.910 --> 03:49.780 And browser router. 03:51.610 --> 03:53.200 From the package. 03:53.200 --> 03:54.010 We just. 03:55.880 --> 03:56.420 Install. 03:56.630 --> 04:01.550 So we have those here and then we can actually use it. 04:01.550 --> 04:04.070 So what is happening? 04:04.070 --> 04:07.460 Actually, I'm not going to do that here. 04:07.460 --> 04:10.370 I will show you where we can actually implement it. 04:10.400 --> 04:13.430 It's really up to us where we would like to do it. 04:13.430 --> 04:17.270 But I will go to the top level element, which is our. 04:18.200 --> 04:21.560 Index.js here and Index.js here. 04:21.560 --> 04:30.080 Basically, it's rendering this application inside our route so I can actually start from here and then 04:30.080 --> 04:39.830 I can decide at this point what should be passed to this route based on the URL we have in our browser. 04:39.830 --> 04:46.130 So we have this route and browser router and we can instead use App.js. 04:46.160 --> 04:54.530 We can actually pass the router inside so we can create a variable that will be constant. 04:56.330 --> 05:03.430 Routing and then in the parentheses I can do something here. 05:03.440 --> 05:10.280 So basically this routing here, I can replace it with an app like that. 05:11.460 --> 05:19.620 And then what we need to do is we need to wrap everything in the browser router like that. 05:20.620 --> 05:24.550 And inside we can use our roots. 05:24.580 --> 05:26.650 We also will have more than one. 05:26.650 --> 05:33.450 So I will wrap everything in the div and then I will create a root for each component. 05:33.460 --> 05:40.270 Let's say we'd like to use it so we have our root here and then we can do a part like that. 05:40.480 --> 05:47.740 And then let's decide on the part if there will be nothin in my URL like this. 05:47.740 --> 05:51.850 So at the moment it's localhost 3000 and there is no nothing there. 05:51.850 --> 05:54.460 So it is like a single slash. 05:54.760 --> 06:00.160 Then I can decide what component I would like to use. 06:02.970 --> 06:09.210 And then I can say the application component that how it was before. 06:09.210 --> 06:16.440 So before we pass this to render the app component here and that was render based on this. 06:16.440 --> 06:24.810 But this time we are saying if the path is like this so there is not an in the URL, then use the component 06:24.810 --> 06:28.140 app and if I will save it now actually I need to run it. 06:28.140 --> 06:29.850 So npm start. 06:31.620 --> 06:34.350 So let's come back to our previous. 06:37.860 --> 06:41.570 And you can see here everything is as we had it before. 06:41.580 --> 06:46.260 So basically this time we are saying just render whatever. 06:46.260 --> 06:53.010 It's actually from the routing and the routing decided on based on the path, which component to render. 06:53.010 --> 06:54.240 So we have just one. 06:54.240 --> 06:56.370 And in this case we have up. 06:56.370 --> 07:03.840 So let's say we would like to have header and footer that will be like a separate separate pages. 07:04.500 --> 07:05.580 I will just copy this. 07:05.610 --> 07:14.430 It will be easier for me to use it in the index and I will just implement import them here and then 07:14.430 --> 07:16.890 I can duplicate this twice. 07:16.890 --> 07:19.110 So let's say if I will have. 07:20.580 --> 07:21.380 Heather. 07:21.810 --> 07:24.380 And then I can have footer. 07:24.390 --> 07:32.670 So if I will have Heather, then I would like to use Heather component. 07:32.670 --> 07:35.930 If I will have a footer, I will use footer component. 07:35.940 --> 07:40.080 Of course this is header and footer, so it shouldn't be used as a whole page. 07:40.080 --> 07:43.520 But as an example, I would like to show you how it works. 07:43.530 --> 07:51.810 So basically what we have here, so once we have that different roles here, what we can do is if we 07:51.810 --> 07:58.950 go to our URL and we see the app component, because at the moment the path is like this. 07:58.950 --> 08:07.200 But we can add, for example, let's add footer at the very end and you can see here a strange thing 08:07.200 --> 08:07.980 happening. 08:08.010 --> 08:14.910 You have this footer because we had that loop inside our footer and we have it twice. 08:14.910 --> 08:18.600 So this is the app and this is the footer. 08:18.600 --> 08:25.540 So why this is happening, the reason for this is React is going from top to the bottom and it will 08:25.540 --> 08:27.280 try to match all the paths. 08:27.280 --> 08:30.760 So basically, it's first it's trying to match this one. 08:30.790 --> 08:31.750 Do we have this one? 08:31.750 --> 08:38.860 So it's like URL and slash It is and then it doesn't really mind if you have something a after this, 08:38.860 --> 08:40.840 but this match, this part. 08:40.840 --> 08:42.790 So it will render this component. 08:42.790 --> 08:47.470 And then let's go for a header, not in the header and then it will go footer. 08:47.500 --> 08:49.690 There is footer, so it will display. 08:49.690 --> 08:52.840 So at the moment we have pulled up and the footer. 08:52.840 --> 08:54.730 So how can we deal with that? 08:54.730 --> 09:01.150 If you would like to have it exactly like it is here, you need to pass exact here. 09:01.150 --> 09:06.370 So this way you are telling okay, if the path will be exact like this. 09:06.370 --> 09:10.600 So nothing else in the URL then render the application. 09:10.600 --> 09:13.330 Otherwise go to the next one. 09:13.330 --> 09:14.620 So we are checking header. 09:14.620 --> 09:16.450 No header and footer. 09:16.450 --> 09:17.200 There is footer. 09:17.200 --> 09:18.310 So we display this. 09:18.310 --> 09:24.340 So if we come back here to normal URL, you can see the app is displayed. 09:24.340 --> 09:32.110 So this is how the router works and obviously you're not going to do it with header and footer. 09:32.140 --> 09:40.000 This is supposed to be a real pages or some kind of navigation and then you can have a normal navigation 09:40.000 --> 09:44.560 as you would have in a traditional HTML page and then you can have a link. 09:44.560 --> 09:52.540 So if you link it to this, this URL then react automatically loads that component for you. 09:52.540 --> 09:58.750 So you can work with links and you can work with different URLs to display different content for your 09:58.750 --> 09:59.470 website.