Navigating Between Routes3:17 with Guil Hernandez
In this video, we'll use React Router's
<Link> component to navigate between our routes.
[MUSIC] 0:00 In the previous stage, 0:04 you learned the basics of creating routes with React Router, and 0:05 some of the benefits of its simple, declarative approach to writing routes. 0:08 And by declarative, 0:12 I mean that React lets you write code that describes the end result. 0:13 For instance, the route component matches a URL's path and 0:16 loads a component, without you having to define how it should happen. 0:19 In this stage, I'll introduce you to clever and 0:23 useful writing features React Router provides to navigate between routes, 0:25 display active navigation links, even redirect routes and more. 0:29 First up, no single page app is complete without navigation. 0:33 That links users to the different sections of your app. 0:36 It's what users usually interact with most. 0:39 Up until now we've navigated the directory app by manually changing the URL in 0:41 the address bar. 0:45 But users need to move through the app by clicking the links in the main menu. 0:46 So now, let's create the main navigation for 0:51 our application using React Router's link and nav link components. 0:53 Currently, the app uses anchor elements to display the navigation links. 0:57 And clicking on a link doesn't take you anywhere yet, 1:02 because they're just placeholder links. 1:04 Well with React Router, 1:07 you don't use regular anchor tags to link to the routes in your app. 1:08 Instead, it provides an intelligent solution for 1:12 navigating between routes with link. 1:13 The link component is one of React Router's core writing components. 1:16 To begin using link, we need to import it, so at the top of header.js, 1:19 let's import Link from react-router-dom. 1:23 Next, we'll need to replace the a tags in the nav with link tags. 1:30 So to link the home route, lets replace the opening and 1:34 closing a tags with link tags. 1:37 And replace the href attribute with the to attribute. 1:40 Now the to attribute is similar to the href attribute in anchor elements. 1:46 It points the link component to a route by changing the path in the URL. 1:50 So the value for to should match the path defined for the route. 1:54 So for the home link, it should be a forward slash. 2:00 All right, so let's test this. 2:04 Over in the browser, clicking the Home link, loads the Home component inside app. 2:06 Great, so now let's define the rest of our route links. 2:11 In Atom, I can use the shortcut Cmd+D to select all opening a tags and 2:14 href attributes at once, and change them to link tags with two attributes. 2:21 I'll also change the closing a tags by selecting them all at once and 2:28 replacing them with closing link tags. 2:32 Now let's not forget to include the paths for About, Teachers, and Courses. 2:39 And it looks like our navigation is now hooked up to our routes. 2:51 And if you inspect the nav in your dev tools, 2:56 you'll see that React renders fully accessible anchor elements for each link. 2:59 And it includes the proper paths in the href attributes. 3:04 The navigation is working, but when you click on a link, 3:09 the link doesn't remain active. 3:12 We'll address this in the next video. 3:15
You need to sign up for Treehouse in order to download course files.Sign up