When you render a component with a route, React router passes the component

additional information about the current path name and

the path and URL the route is matching.

If you inspect the courses component in React.tools,

you'll see three props being passed to it, history, location and match.

Now match contains information about how a route is matching the URL.

For example the path property let's us know that courses uses the /courses path

and the url property tells us that it's matching the courses portion of the url.

And we can access this data from inside components being rendered by routes.

The path and url properties are useful when building nested routes and links.

So now that all our routes are in place, let's take advantage of this data to have

our course's routes and link dynamically match the current URL and path.

That way, we don't have to worry about whether we're including a forward slash in

front of them, or if our nested routes and links are going to match the current URL.

So first, to access the match data from inside the Courses component,

we'll pass the match object to the Courses function.

Next, we'll pas the NavLinks the portion of the URL to match,

which you can access from the url property.

So for HTML, we'll replace the to value with a set of curly braces and

we'll create the paths using a template literal that dynamically places or

interpolates the value of match.url into the path.

And we'll do the same for CSS by copying the expression we just wrote,

pasting it in to the to value and switching the path to /css, and

we'll do the same for JavaScript.

Over in our routes, we'll follow the same steps, except this time interpolate

the value of match.path which is going to return the string /courses.

So first, we'll pass the redirect

route match.path to set the path.

And then in the redirect component,

set the two prop to an expression that creates the path using a template literal.

And we'll do the same for the remaining routes.

I'll simply copy this to value here and

replace the HTML, CSS, and JavaScript paths.

Let's go over to the browser And we're all set.

Everything still works as expected.

So now, even if we change the courses path and URL down the road,

our NavLinks and Routes will always match and render correctly.

Be sure to check the teacher's notes of this video to learn more about

route props.

At this point you've learned enough about React router to begin using it in your

React apps.

Well done.

Coming up in the next stage, you'll push your skills even further by

learning how to create 404-like error routes, past parameter and

data to routes and change routes programmatically.