1 00:00:00,410 --> 00:00:06,110 Okay, so now we're going to implement React router dom and we need to install it in the front end. 2 00:00:06,110 --> 00:00:11,000 So I'm going to just stop the dev server real quick, make sure that you're in the front end and let's 3 00:00:11,000 --> 00:00:17,120 run NPM install react dash router dash dom. 4 00:00:18,660 --> 00:00:22,950 Now we're using version I think it's 6.8. 5 00:00:23,310 --> 00:00:24,870 Let's actually check that. 6 00:00:24,870 --> 00:00:28,230 So in the front end Package.json. 7 00:00:29,500 --> 00:00:29,940 Let's see. 8 00:00:29,950 --> 00:00:30,970 React router dom. 9 00:00:31,000 --> 00:00:32,950 We're using version 610. 10 00:00:33,430 --> 00:00:35,350 In version six four. 11 00:00:35,380 --> 00:00:40,780 They added they made some changes, added some things we're not going to be using like loaders or any 12 00:00:40,780 --> 00:00:42,010 of the real new stuff. 13 00:00:42,010 --> 00:00:44,440 I want to keep this really, really simple. 14 00:00:44,470 --> 00:00:44,830 All right. 15 00:00:44,830 --> 00:00:47,080 So we're not going to do anything crazy. 16 00:00:47,080 --> 00:00:54,760 So let's run the server again and we're going to actually put our routes in the Index.js file. 17 00:00:54,760 --> 00:00:59,470 I want to kind of keep clear that the app.js so I don't want a bunch of routes. 18 00:00:59,470 --> 00:01:02,230 We have a lot of routes like a lot. 19 00:01:02,680 --> 00:01:11,800 So I'm going to go under where we have our react Dom and let's say import and it's going to be from 20 00:01:11,800 --> 00:01:20,530 React Dash router dom And there's a few things that we need to bring in first is going to be create, 21 00:01:21,070 --> 00:01:22,870 create browser router. 22 00:01:22,900 --> 00:01:24,910 Then we want create. 23 00:01:26,100 --> 00:01:34,110 Roots from elements and then root and then we need our provider. 24 00:01:34,110 --> 00:01:35,430 So it's router. 25 00:01:36,750 --> 00:01:38,130 Router provider. 26 00:01:40,110 --> 00:01:40,440 All right. 27 00:01:40,440 --> 00:01:43,770 And then we want to add down here our router. 28 00:01:43,770 --> 00:01:49,380 So let's say const router, we're going to set that to create browser router and what that's going to 29 00:01:49,380 --> 00:01:50,160 have. 30 00:01:51,480 --> 00:01:57,690 What that's going to have inside of it is this create routes from elements and inside that is where 31 00:01:57,690 --> 00:02:00,870 we create our routes using the route component. 32 00:02:00,870 --> 00:02:03,780 So we're going to do that and close it. 33 00:02:05,630 --> 00:02:11,930 Okay, So this has the path of slash, which is basically going to be what is going to be like the parent. 34 00:02:11,930 --> 00:02:15,660 And that takes in an element of our entire app. 35 00:02:15,680 --> 00:02:21,950 Now inside of that is where we create our routes for like the home screen cart screen, all that stuff. 36 00:02:21,950 --> 00:02:31,160 And later on, we're going to have protected routes for routes like, like profile and things like that 37 00:02:31,160 --> 00:02:35,510 where public the public shouldn't be able to go unless they're logged in. 38 00:02:35,630 --> 00:02:38,900 So the path for this is going to be slash. 39 00:02:38,900 --> 00:02:43,940 However, we do want to say that index equals true here. 40 00:02:44,120 --> 00:02:49,130 If we don't do that, we might have issues where it will show multiple screens at once. 41 00:02:49,130 --> 00:02:55,760 So we want to make sure that if we're on just slash then and that's the index, then we want to show 42 00:02:55,760 --> 00:02:56,960 the home screen. 43 00:02:56,960 --> 00:03:00,020 Now we want to use the provider that we brought in. 44 00:03:00,020 --> 00:03:04,820 And in the past, what we did is we would wrap this app component. 45 00:03:04,850 --> 00:03:06,510 We'd wrap it in the provider. 46 00:03:06,510 --> 00:03:11,880 Well, since we're providing the app component here, we don't actually need to wrap this. 47 00:03:11,880 --> 00:03:18,600 We need to replace it with the router provider and then we pass in the router as a prop. 48 00:03:19,330 --> 00:03:21,070 Did I bring this in correctly? 49 00:03:22,730 --> 00:03:24,350 Uh, what's the problem here? 50 00:03:27,010 --> 00:03:28,660 Rope is no corresponding. 51 00:03:29,020 --> 00:03:30,850 Oh, we need a closing tag. 52 00:03:31,930 --> 00:03:32,230 All right. 53 00:03:32,230 --> 00:03:33,580 So that should work. 54 00:03:33,580 --> 00:03:39,970 Now, if I save, we're going to get an issue because home screen is not defined. 55 00:03:41,080 --> 00:03:46,660 And the reason for that is because I didn't bring it in to the index.js. 56 00:03:46,660 --> 00:03:51,880 So basically, whatever screen we want to bring in or whatever we want to create a route to, we have 57 00:03:51,880 --> 00:03:52,660 to bring in. 58 00:03:52,660 --> 00:03:54,300 So let's pass that in. 59 00:03:54,310 --> 00:03:59,980 Now this we're still not using the router, we're just seeing the home screen because I still have it 60 00:03:59,980 --> 00:04:01,720 embedded in the app.js. 61 00:04:01,720 --> 00:04:08,650 So we actually want to fix that by bringing in the outlet from React router so we can get rid of the 62 00:04:08,650 --> 00:04:15,190 home screen in bed and the import because now we're importing it into Index.js where our router is. 63 00:04:15,190 --> 00:04:21,100 But we do need to import the outlet, which is just that it's the outlet for the router. 64 00:04:21,100 --> 00:04:26,920 So we want to bring that in and then we're just going to put where we had home screen, we're going 65 00:04:26,920 --> 00:04:28,150 to put the outlet. 66 00:04:28,360 --> 00:04:32,400 So if we save, we should get pretty much the same thing, right? 67 00:04:32,420 --> 00:04:36,740 We're still seeing the home screen because we're on that on that route. 68 00:04:36,740 --> 00:04:40,850 And I'm just going to move the outlet up up above the component here. 69 00:04:41,890 --> 00:04:44,410 So right now we have some links, right? 70 00:04:44,410 --> 00:04:46,270 We have a link on that. 71 00:04:46,270 --> 00:04:50,710 Now you see how we got the little spinner in the in the in the tab here. 72 00:04:50,710 --> 00:04:55,510 That's because we used an A tag and none of these routes are going to work right now. 73 00:04:55,510 --> 00:05:01,030 But we don't want to use an A tag because we don't want it to load it like a regular page. 74 00:05:01,030 --> 00:05:03,970 All of our routes are client side JavaScript. 75 00:05:03,970 --> 00:05:14,170 So let's go to the products component and we're going to import here, let's say import link from React 76 00:05:14,170 --> 00:05:21,220 router Dom and wherever we have an A RF, we're going to replace that with Link and instead of RF, 77 00:05:21,220 --> 00:05:23,800 we're going to use the to prop. 78 00:05:23,920 --> 00:05:29,350 Now if you're using Next.js and you use the link with with next, then it's still RF. 79 00:05:29,350 --> 00:05:31,090 So that kind of I get confused with that. 80 00:05:31,090 --> 00:05:34,780 So you might see me still use RF and screw up. 81 00:05:34,930 --> 00:05:41,870 I do that pretty often, but we're going to change this one to so link and that's going to that's going 82 00:05:41,870 --> 00:05:47,150 to be two okay and these should still now go to those two those routes. 83 00:05:47,150 --> 00:05:53,810 But notice that in the in the little tab here there's no like spinner because it's not actually loading 84 00:05:53,810 --> 00:05:55,610 a new route or a new page. 85 00:05:55,700 --> 00:06:02,630 Now, we want to also do this with the NAV or in the header here, but it's a little different because 86 00:06:02,660 --> 00:06:05,390 we're not just using an A tag, right? 87 00:06:05,900 --> 00:06:11,840 For instance, with the brand, we're using this nav bar brand and putting the href on that. 88 00:06:11,840 --> 00:06:14,900 So we can't just put a link around it. 89 00:06:14,930 --> 00:06:21,020 What we're going to do is use a separate, a separate package called React router bootstrap. 90 00:06:21,020 --> 00:06:26,990 So let's just stop the server and make sure you're in your front end and let's say NPM install, react, 91 00:06:27,020 --> 00:06:37,610 dash, router, dash bootstrap and this will help us be able to to have client side links within NAV 92 00:06:37,610 --> 00:06:38,360 links. 93 00:06:39,280 --> 00:06:39,490 Okay. 94 00:06:39,490 --> 00:06:41,380 We'll go ahead and run this again. 95 00:06:41,380 --> 00:06:43,690 And now what we can do. 96 00:06:44,820 --> 00:06:48,360 Is, let's see, we're going to import. 97 00:06:49,950 --> 00:06:53,610 Let's say, import, and we're going to bring in the link container. 98 00:06:53,940 --> 00:06:57,980 So link container from React router bootstrap. 99 00:06:57,990 --> 00:07:02,850 And then what we have to do is wherever we have an RF, we're going to get rid of that. 100 00:07:02,850 --> 00:07:08,400 So on the brand here, we'll get rid of the RF and then we're just going to simply wrap this in a link 101 00:07:08,400 --> 00:07:11,910 container, the whole NAV bar brand just like that. 102 00:07:11,910 --> 00:07:15,570 And the link container has two uses too. 103 00:07:15,570 --> 00:07:19,230 And then we're going to come down here and we're going to do the same thing with. 104 00:07:20,140 --> 00:07:21,730 With the nav links. 105 00:07:21,730 --> 00:07:30,970 So let's get rid of the ref cart and then we'll go above it and we'll have a link container to cart 106 00:07:30,970 --> 00:07:34,330 and then we're going to wrap the nav link. 107 00:07:34,360 --> 00:07:35,290 Same thing here. 108 00:07:35,290 --> 00:07:38,440 Link container to login and we're going to wrap that. 109 00:07:38,620 --> 00:07:42,610 Now we should be able to go to Cart and see how quick it is. 110 00:07:42,640 --> 00:07:45,730 And there's no there's no spinner or anything like that. 111 00:07:46,910 --> 00:07:50,050 All right, so we have the router implemented. 112 00:07:50,060 --> 00:07:57,800 Now, what I want to do before we move on to anything else, I want to add the rating component to our 113 00:07:57,800 --> 00:08:00,530 products because it's going to have a little star rating. 114 00:08:00,530 --> 00:08:02,930 So we're going to get into that in the next video.