1 00:00:00,000 --> 00:00:04,563 [MUSIC] 2 00:00:04,563 --> 00:00:05,618 In the previous stage, 3 00:00:05,618 --> 00:00:08,521 you learned the basics of creating routes with React Router, and 4 00:00:08,521 --> 00:00:12,190 some of the benefits of its simple, declarative approach to writing routes. 5 00:00:12,190 --> 00:00:13,190 And by declarative, 6 00:00:13,190 --> 00:00:16,380 I mean that React lets you write code that describes the end result. 7 00:00:16,380 --> 00:00:19,350 For instance, the route component matches a URL's path and 8 00:00:19,350 --> 00:00:23,430 loads a component, without you having to define how it should happen. 9 00:00:23,430 --> 00:00:25,890 In this stage, I'll introduce you to clever and 10 00:00:25,890 --> 00:00:29,590 useful writing features React Router provides to navigate between routes, 11 00:00:29,590 --> 00:00:33,440 display active navigation links, even redirect routes and more. 12 00:00:33,440 --> 00:00:36,905 First up, no single page app is complete without navigation. 13 00:00:36,905 --> 00:00:39,235 That links users to the different sections of your app. 14 00:00:39,235 --> 00:00:41,645 It's what users usually interact with most. 15 00:00:41,645 --> 00:00:45,877 Up until now we've navigated the directory app by manually changing the URL in 16 00:00:45,877 --> 00:00:46,848 the address bar. 17 00:00:46,848 --> 00:00:51,075 But users need to move through the app by clicking the links in the main menu. 18 00:00:51,075 --> 00:00:53,380 So now, let's create the main navigation for 19 00:00:53,380 --> 00:00:56,879 our application using React Router's link and nav link components. 20 00:00:57,960 --> 00:01:02,390 Currently, the app uses anchor elements to display the navigation links. 21 00:01:02,390 --> 00:01:04,710 And clicking on a link doesn't take you anywhere yet, 22 00:01:04,710 --> 00:01:07,120 because they're just placeholder links. 23 00:01:07,120 --> 00:01:08,270 Well with React Router, 24 00:01:08,270 --> 00:01:12,080 you don't use regular anchor tags to link to the routes in your app. 25 00:01:12,080 --> 00:01:13,980 Instead, it provides an intelligent solution for 26 00:01:13,980 --> 00:01:16,370 navigating between routes with link. 27 00:01:16,370 --> 00:01:19,690 The link component is one of React Router's core writing components. 28 00:01:19,690 --> 00:01:23,964 To begin using link, we need to import it, so at the top of header.js, 29 00:01:23,964 --> 00:01:26,834 let's import Link from react-router-dom. 30 00:01:30,064 --> 00:01:34,640 Next, we'll need to replace the a tags in the nav with link tags. 31 00:01:34,640 --> 00:01:37,570 So to link the home route, lets replace the opening and 32 00:01:37,570 --> 00:01:40,770 closing a tags with link tags. 33 00:01:40,770 --> 00:01:46,230 And replace the href attribute with the to attribute. 34 00:01:46,230 --> 00:01:50,454 Now the to attribute is similar to the href attribute in anchor elements. 35 00:01:50,454 --> 00:01:54,850 It points the link component to a route by changing the path in the URL. 36 00:01:54,850 --> 00:02:00,000 So the value for to should match the path defined for the route. 37 00:02:00,000 --> 00:02:02,749 So for the home link, it should be a forward slash. 38 00:02:04,340 --> 00:02:06,020 All right, so let's test this. 39 00:02:06,020 --> 00:02:11,170 Over in the browser, clicking the Home link, loads the Home component inside app. 40 00:02:11,170 --> 00:02:14,140 Great, so now let's define the rest of our route links. 41 00:02:14,140 --> 00:02:21,510 In Atom, I can use the shortcut Cmd+D to select all opening a tags and 42 00:02:21,510 --> 00:02:26,430 href attributes at once, and change them to link tags with two attributes. 43 00:02:28,250 --> 00:02:32,730 I'll also change the closing a tags by selecting them all at once and 44 00:02:32,730 --> 00:02:34,730 replacing them with closing link tags. 45 00:02:39,610 --> 00:02:43,567 Now let's not forget to include the paths for About, Teachers, and Courses. 46 00:02:51,423 --> 00:02:55,040 And it looks like our navigation is now hooked up to our routes. 47 00:02:56,440 --> 00:02:59,330 And if you inspect the nav in your dev tools, 48 00:02:59,330 --> 00:03:04,090 you'll see that React renders fully accessible anchor elements for each link. 49 00:03:04,090 --> 00:03:06,905 And it includes the proper paths in the href attributes. 50 00:03:09,528 --> 00:03:12,731 The navigation is working, but when you click on a link, 51 00:03:12,731 --> 00:03:15,090 the link doesn't remain active. 52 00:03:15,090 --> 00:03:16,480 We'll address this in the next video.