1 00:00:00,660 --> 00:00:05,580 In the last video we started to wire up our Hetter but we very quickly ran into this nasty error message. 2 00:00:05,610 --> 00:00:10,760 So the error message says you should not use a link element outside of a router. 3 00:00:10,760 --> 00:00:16,970 Now a couple of videos ago I showed you a diagram that looked like this one right here and I told you 4 00:00:17,060 --> 00:00:21,530 that any time that we wanted to make sure that a component was always visible inside of application 5 00:00:21,710 --> 00:00:24,140 we could just place it outside the browser router. 6 00:00:24,170 --> 00:00:28,820 The one exception to that rule is if these outside components over here that should always be visible 7 00:00:28,940 --> 00:00:35,870 are going to contain any re-act router related elements such as a link if we are trying to show a link 8 00:00:35,930 --> 00:00:40,100 on a page or any element that is outside of our browser router. 9 00:00:40,100 --> 00:00:42,890 We're going to get the exact same air that you see right here. 10 00:00:43,340 --> 00:00:46,740 This error message saying you should not use a link outside of a router. 11 00:00:46,760 --> 00:00:53,090 Is he essentially saying that any component that is not a child of our router cannot contain any re-act 12 00:00:53,090 --> 00:00:55,070 router of related components. 13 00:00:55,070 --> 00:01:00,800 So essentially we need to kind of migrate our architecture or our component hierarchy here from what 14 00:01:00,800 --> 00:01:03,930 you see on the screen to something a little bit closer to this. 15 00:01:04,010 --> 00:01:08,130 So we're going to make sure that the app component renders the browser router as it still is. 16 00:01:08,180 --> 00:01:13,170 But now we're going to simply take our header component and move it underneath the browser router. 17 00:01:13,550 --> 00:01:18,290 Now because the header component is not going to be wrapped up inside of a route the header will continue 18 00:01:18,290 --> 00:01:19,990 to always be visible. 19 00:01:20,420 --> 00:01:27,470 So going to be a pretty easy fix here will fall back over to our Apter jazz file or find my header component 20 00:01:27,470 --> 00:01:28,720 right here. 21 00:01:28,820 --> 00:01:35,000 I'm going to cut this thing and move it into this div right here. 22 00:01:35,050 --> 00:01:37,740 So now the header is a child of the browser router. 23 00:01:37,810 --> 00:01:41,180 And so it can successfully make use of a link element. 24 00:01:41,520 --> 00:01:46,750 So I'll say this again we should be able to flip back over and we'll see our head appear. 25 00:01:46,750 --> 00:01:47,110 All right. 26 00:01:47,150 --> 00:01:48,580 So that doesn't look half bad. 27 00:01:48,610 --> 00:01:52,270 Now of course you probably see something that looks a little bit closer to this as a reminder. 28 00:01:52,270 --> 00:01:57,310 I always run with my screen very far zoomed in just so you can see what I see very easily. 29 00:01:57,370 --> 00:02:02,950 Now I should be able to click on this link over here I built to click on this link over here and still 30 00:02:03,040 --> 00:02:05,000 see everything as expected. 31 00:02:05,420 --> 00:02:08,980 I'm going to also very quickly check to make sure they don't have any errors here. 32 00:02:09,010 --> 00:02:13,930 If I open up my console you'll notice that I have a little warning here that simply says that the link 33 00:02:14,170 --> 00:02:16,000 variable is defined but never used. 34 00:02:16,030 --> 00:02:18,070 And that's inside the APTA jazz file. 35 00:02:18,130 --> 00:02:19,770 So I'm going to clean that up very quickly. 36 00:02:19,990 --> 00:02:25,720 If I open up my attic file and find my import statement for re-act router Dom you'll notice that we 37 00:02:25,720 --> 00:02:29,150 were importing link inside of your but we never make use of that variable. 38 00:02:29,260 --> 00:02:31,170 So I'm going to clean that up from the. 39 00:02:31,270 --> 00:02:32,360 Yes file. 40 00:02:32,440 --> 00:02:34,390 Now when I save this that error goes away. 41 00:02:34,830 --> 00:02:36,050 OK so this looks pretty good. 42 00:02:36,050 --> 00:02:38,700 Now take a quick pause right here and we continue in the next video. 43 00:02:38,800 --> 00:02:43,090 We're going to start moving over to discussing how we're going to set up authentication inside of our 44 00:02:43,090 --> 00:02:43,840 application.