1 00:00:00,240 --> 00:00:08,610 And once we're done with a general structure for our pages now, let me just show you all deal in component 2 00:00:08,880 --> 00:00:14,610 works in Reactor Router six, which essentially is exactly the same like you used already in the previous 3 00:00:14,610 --> 00:00:15,090 versions. 4 00:00:15,450 --> 00:00:22,110 So we need to get the link component and we just need to specify the URL in the to prop. 5 00:00:22,470 --> 00:00:27,870 So we come up with through prop and then we just say if we want to navigate back to the home page, 6 00:00:27,870 --> 00:00:32,400 then we go with forward slash and then register and hopefully you get the gist. 7 00:00:32,759 --> 00:00:38,370 Now again, this is just going to be temporary, but I'm going to set it up here in the address. 8 00:00:38,820 --> 00:00:42,330 So we still want to place that above the roots. 9 00:00:42,720 --> 00:00:44,400 So don't place it inside of it. 10 00:00:44,910 --> 00:00:47,280 And then we want to provide these values again. 11 00:00:47,280 --> 00:00:49,920 This is going to be temporary and our removed and a few videos. 12 00:00:50,760 --> 00:00:59,370 And then lastly, once we're done, you can go to London Gas Import Link from road or down from where 13 00:00:59,370 --> 00:01:00,450 we have the button right now. 14 00:01:01,260 --> 00:01:02,670 Replace it with a link. 15 00:01:02,800 --> 00:01:10,350 Now you can still keep the classic the same and you want to set to drop to a register page. 16 00:01:10,800 --> 00:01:12,030 So let's get cracking. 17 00:01:12,450 --> 00:01:17,760 First, we want to go to your app just and like I said above the roots or set up the temporary one. 18 00:01:18,390 --> 00:01:20,110 And here we're looking for it now. 19 00:01:20,610 --> 00:01:25,290 And since I already have to import for the link and just note the link on Line two. 20 00:01:25,590 --> 00:01:27,660 And again, dashboard will be my homepage. 21 00:01:28,110 --> 00:01:32,280 So just go here like so and then whatever text we want. 22 00:01:32,280 --> 00:01:36,370 So I'm going to go with dash and bored. 23 00:01:36,690 --> 00:01:38,610 Let's say that one line. 24 00:01:38,670 --> 00:01:42,900 Let's copy and paste, and it's going to be ugly because it's going to be temporary. 25 00:01:42,900 --> 00:01:46,740 So I'm not going to worry about the styles and all that. 26 00:01:47,100 --> 00:01:48,630 So I just say register. 27 00:01:49,620 --> 00:01:51,210 Thing that is the next one. 28 00:01:51,630 --> 00:01:54,300 And then at the very end, we also going to have a landing. 29 00:01:54,480 --> 00:01:54,900 Correct. 30 00:01:55,470 --> 00:02:01,820 So let's add them up and do the same thing here to register and to landing. 31 00:02:02,220 --> 00:02:05,370 And we should be good to go when we have those links over here. 32 00:02:05,610 --> 00:02:10,830 So now I click on register and I get to the landing and back to the dashboard. 33 00:02:11,100 --> 00:02:12,000 So now it's left. 34 00:02:12,540 --> 00:02:17,070 I want to go to our landing page and we're still looking for the link. 35 00:02:17,610 --> 00:02:24,780 So let me just set it up over here where I say import of that link from React router down and then where 36 00:02:24,780 --> 00:02:28,890 I have the button now instead of the button, we're going to go for a link. 37 00:02:29,160 --> 00:02:31,590 Then let's remember to set up a register. 38 00:02:32,460 --> 00:02:40,350 And then once we save it, once I go to the landing, I should be able to click on this one and navigate 39 00:02:40,350 --> 00:02:41,610 back to the register. 40 00:02:42,090 --> 00:02:45,830 So that's how the Link component works in React Router six.