Using the Match Object

When you render a component with a route, React router passes the component 0:00 additional information about the current path name and 0:04 the path and URL the route is matching. 0:07 If you inspect the courses component in React.tools, 0:09 you'll see three props being passed to it, history, location and match. 0:12 Now match contains information about how a route is matching the URL. 0:18 For example the path property let's us know that courses uses the /courses path 0:22 and the url property tells us that it's matching the courses portion of the url. 0:29 And we can access this data from inside components being rendered by routes. 0:33 The path and url properties are useful when building nested routes and links. 0:37 So now that all our routes are in place, let's take advantage of this data to have 0:42 our course's routes and link dynamically match the current URL and path. 0:47 That way, we don't have to worry about whether we're including a forward slash in 0:51 front of them, or if our nested routes and links are going to match the current URL. 0:55 So first, to access the match data from inside the Courses component, 1:00 we'll pass the match object to the Courses function. 1:04 Next, we'll pas the NavLinks the portion of the URL to match, 1:10 which you can access from the url property. 1:15 So for HTML, we'll replace the to value with a set of curly braces and 1:19 we'll create the paths using a template literal that dynamically places or 1:24 interpolates the value of match.url into the path. 1:29 And we'll do the same for CSS by copying the expression we just wrote, 1:38 pasting it in to the to value and switching the path to /css, and 1:43 we'll do the same for JavaScript. 1:48 Over in our routes, we'll follow the same steps, except this time interpolate 1:54 the value of match.path which is going to return the string /courses. 2:00 So first, we'll pass the redirect 2:05 route match.path to set the path. 2:09 And then in the redirect component, 2:14 set the two prop to an expression that creates the path using a template literal. 2:17 And we'll do the same for the remaining routes. 2:30 I'll simply copy this to value here and 2:33 replace the HTML, CSS, and JavaScript paths. 2:36 Let's go over to the browser And we're all set. 2:49 Everything still works as expected. 2:55 So now, even if we change the courses path and URL down the road, 2:58 our NavLinks and Routes will always match and render correctly. 3:02 Be sure to check the teacher's notes of this video to learn more about 3:13 route props. 3:17 At this point you've learned enough about React router to begin using it in your 3:18 React apps. 3:22 Well done. 3:23 Coming up in the next stage, you'll push your skills even further by 3:24 learning how to create 404-like error routes, past parameter and 3:27 data to routes and change routes programmatically. 3:30