1 00:00:01,020 --> 00:00:01,853 Instructor: In the last section, 2 00:00:01,853 --> 00:00:03,390 we created our header component 3 00:00:03,390 --> 00:00:05,400 and added it to the app component. 4 00:00:05,400 --> 00:00:08,130 But then we very quickly got this air message on the screen. 5 00:00:08,130 --> 00:00:10,440 So the issue right now is just that we used a link tag 6 00:00:10,440 --> 00:00:13,650 outside of the context of a router component. 7 00:00:13,650 --> 00:00:14,483 Not a big issue. 8 00:00:14,483 --> 00:00:16,773 All we have to do is add a router in. 9 00:00:17,610 --> 00:00:19,830 So back inside my code editor, 10 00:00:19,830 --> 00:00:22,140 I'll open up my index.js file, 11 00:00:22,140 --> 00:00:25,293 which is where we're going to define our router component. 12 00:00:26,430 --> 00:00:27,930 To get started, at the top, 13 00:00:27,930 --> 00:00:32,930 I will import browser router from react-router-dom, like so. 14 00:00:37,200 --> 00:00:38,880 And then I'll place this browser router 15 00:00:38,880 --> 00:00:41,073 to wrap the app component. 16 00:00:42,570 --> 00:00:44,670 So I'll give myself a little bit of space, 17 00:00:46,380 --> 00:00:49,533 and here's my, oops, BrowserRouter, 18 00:00:52,680 --> 00:00:54,543 and I'll close the tag off as well. 19 00:00:56,790 --> 00:00:59,100 Now if I save this and then flip back over the browser, 20 00:00:59,100 --> 00:01:01,050 we should see that air message go away. 21 00:01:02,760 --> 00:01:04,382 So after the reload kicks in, 22 00:01:07,410 --> 00:01:09,870 we got all of our links up here at the top. 23 00:01:09,870 --> 00:01:12,120 Now the links look awfully ugly right now. 24 00:01:12,120 --> 00:01:14,070 They're all sandwiched up against each other. 25 00:01:14,070 --> 00:01:15,660 We'll do a little bit of styling 26 00:01:15,660 --> 00:01:17,250 in just a moment to take care of that. 27 00:01:17,250 --> 00:01:18,083 But for right now, 28 00:01:18,083 --> 00:01:20,760 let's continue working on our application. 29 00:01:20,760 --> 00:01:22,080 So the next thing I want to work on 30 00:01:22,080 --> 00:01:24,180 is how we're gonna show different components 31 00:01:24,180 --> 00:01:26,790 in the body of the app right here. 32 00:01:26,790 --> 00:01:29,610 Let's set ourselves a very short-term goal 33 00:01:29,610 --> 00:01:31,290 and say that we just want to try to get this 34 00:01:31,290 --> 00:01:33,750 sort of welcome component onto the screen 35 00:01:33,750 --> 00:01:35,760 in the body of that app, 36 00:01:35,760 --> 00:01:40,320 or essentially, underneath the existing header. 37 00:01:40,320 --> 00:01:43,020 So let's first make a sort of welcome component 38 00:01:43,020 --> 00:01:44,313 to serve this purpose. 39 00:01:45,270 --> 00:01:47,700 Back inside of my editor, I'll make a new file 40 00:01:47,700 --> 00:01:51,763 inside of my components directory called simply Welcome.js. 41 00:01:54,330 --> 00:01:56,370 This will be a extremely simple 42 00:01:56,370 --> 00:01:57,690 and straightforward component. 43 00:01:57,690 --> 00:02:00,720 It's just gonna display a welcome message to our user. 44 00:02:00,720 --> 00:02:03,753 So we'll say import React from react, 45 00:02:05,130 --> 00:02:06,940 and then I will export default 46 00:02:08,550 --> 00:02:11,490 just a tiny little, how about a h3 tag? 47 00:02:11,490 --> 00:02:12,513 I think that's fine. 48 00:02:14,100 --> 00:02:15,813 And we'll just say, Welcome! 49 00:02:16,653 --> 00:02:20,823 Sign up or sign in! 50 00:02:23,520 --> 00:02:25,770 So now that we've got the welcome component put together, 51 00:02:25,770 --> 00:02:29,700 we'll import it into the index.js file that we just created 52 00:02:29,700 --> 00:02:32,580 and create a new route for it. 53 00:02:32,580 --> 00:02:36,450 So inside of index.js, underneath the app import, 54 00:02:36,450 --> 00:02:39,843 I will add on another import for the welcome component. 55 00:02:43,170 --> 00:02:44,910 And then we will create a route 56 00:02:44,910 --> 00:02:47,670 inside of our routing definition right here. 57 00:02:47,670 --> 00:02:49,620 We'll first import the route component 58 00:02:49,620 --> 00:02:51,570 from reactor Router DOM, 59 00:02:51,570 --> 00:02:52,500 and then we need to figure out 60 00:02:52,500 --> 00:02:56,130 exactly where inside of here we want to place that route. 61 00:02:56,130 --> 00:02:59,160 Now, everything that we've seen so far has shown 62 00:02:59,160 --> 00:03:02,040 that we always wanna have the header component on here. 63 00:03:02,040 --> 00:03:04,110 And we already put that header component together 64 00:03:04,110 --> 00:03:05,820 inside of our app. 65 00:03:05,820 --> 00:03:09,810 So what we really want to do is inside of our app component, 66 00:03:09,810 --> 00:03:13,440 we really want to swap out what goes right here. 67 00:03:13,440 --> 00:03:15,690 That's what we really want to change out. 68 00:03:15,690 --> 00:03:18,570 So there's two different ways we could take care of this. 69 00:03:18,570 --> 00:03:21,090 We could either add all of our route configuration 70 00:03:21,090 --> 00:03:23,730 to like literally right here, 71 00:03:23,730 --> 00:03:25,383 or we could instead, 72 00:03:26,250 --> 00:03:31,080 expand the app component right here, like so, 73 00:03:31,080 --> 00:03:33,270 and then add all of our route configurations 74 00:03:33,270 --> 00:03:35,970 inside of this app tag. 75 00:03:35,970 --> 00:03:37,230 Let's try that out really quickly 76 00:03:37,230 --> 00:03:39,450 and let me show you what the effect will be. 77 00:03:39,450 --> 00:03:42,990 So inside this new app tag that I've expanded, 78 00:03:42,990 --> 00:03:47,370 I'll place a route with a path of forward slash, 79 00:03:47,370 --> 00:03:51,750 we'll show the component welcome anytime someone goes here, 80 00:03:51,750 --> 00:03:52,583 and then to make sure 81 00:03:52,583 --> 00:03:54,150 that we only show the welcome component 82 00:03:54,150 --> 00:03:57,060 when someone is on exactly the route forward slash, 83 00:03:57,060 --> 00:04:00,393 I'll add on the prop of exact, like so. 84 00:04:01,740 --> 00:04:04,770 So now whenever the app component is rendered, 85 00:04:04,770 --> 00:04:06,300 this route will be passed 86 00:04:06,300 --> 00:04:09,033 to the app as a prop called children. 87 00:04:09,900 --> 00:04:11,760 If you recall, we actually made use 88 00:04:11,760 --> 00:04:14,190 of the children prop way earlier inside this course 89 00:04:14,190 --> 00:04:18,089 back when we were working on the comment box application. 90 00:04:18,089 --> 00:04:21,269 So if we now open up our app component, 91 00:04:21,269 --> 00:04:24,150 we can receive a prop of children 92 00:04:24,150 --> 00:04:26,220 that will be passed to this component. 93 00:04:26,220 --> 00:04:27,930 That's the only prop we're probably gonna care about. 94 00:04:27,930 --> 00:04:30,423 So I will destructure it out of the props object. 95 00:04:31,320 --> 00:04:33,240 And then rather than showing the text "Hi" 96 00:04:33,240 --> 00:04:34,770 on the app right here, 97 00:04:34,770 --> 00:04:38,103 we will replace it with a reference to that children prop. 98 00:04:39,390 --> 00:04:41,700 So now we can put all of our route configuration 99 00:04:41,700 --> 00:04:45,150 into our index.js file, which kind of centralizes 100 00:04:45,150 --> 00:04:48,630 all of our very core setup logic for our application. 101 00:04:48,630 --> 00:04:49,830 And the app component 102 00:04:49,830 --> 00:04:52,410 doesn't have to have any navigation stuff 103 00:04:52,410 --> 00:04:54,420 directly defined inside of here. 104 00:04:54,420 --> 00:04:56,580 So the app component can stay very simple 105 00:04:56,580 --> 00:04:57,830 and very straightforward. 106 00:04:58,920 --> 00:05:01,020 All right, so I'm gonna save all these files, 107 00:05:01,020 --> 00:05:02,580 and then I'll flip back over the browser 108 00:05:02,580 --> 00:05:04,260 and I'll make sure that I have the ability 109 00:05:04,260 --> 00:05:06,810 to see the welcome component up here on the screen. 110 00:05:08,430 --> 00:05:11,880 So if I go back over, the reload is kicked in, 111 00:05:11,880 --> 00:05:15,210 and I can easily see, "Welcome! Sign up or sign in!" 112 00:05:15,210 --> 00:05:17,850 Perfect. So this looks pretty good. 113 00:05:17,850 --> 00:05:19,350 Let's continue in the next section 114 00:05:19,350 --> 00:05:21,060 and we'll start thinking about adding in 115 00:05:21,060 --> 00:05:23,460 some of the other components to our app as well.