1
00:00:00,340 --> 00:00:04,470
When you render a component with a route,
React router passes the component

2
00:00:04,470 --> 00:00:07,340
additional information about
the current path name and

3
00:00:07,340 --> 00:00:09,590
the path and URL the route is matching.

4
00:00:09,590 --> 00:00:12,980
If you inspect the courses
component in React.tools,

5
00:00:12,980 --> 00:00:18,350
you'll see three props being passed to it,
history, location and match.

6
00:00:18,350 --> 00:00:22,480
Now match contains information about
how a route is matching the URL.

7
00:00:22,480 --> 00:00:29,010
For example the path property let's us
know that courses uses the /courses path

8
00:00:29,010 --> 00:00:33,220
and the url property tells us that it's
matching the courses portion of the url.

9
00:00:33,220 --> 00:00:37,878
And we can access this data from inside
components being rendered by routes.

10
00:00:37,878 --> 00:00:42,660
The path and url properties are useful
when building nested routes and links.

11
00:00:42,660 --> 00:00:47,150
So now that all our routes are in place,
let's take advantage of this data to have

12
00:00:47,150 --> 00:00:51,840
our course's routes and link dynamically
match the current URL and path.

13
00:00:51,840 --> 00:00:55,660
That way, we don't have to worry about
whether we're including a forward slash in

14
00:00:55,660 --> 00:01:00,160
front of them, or if our nested routes and
links are going to match the current URL.

15
00:01:00,160 --> 00:01:04,930
So first, to access the match data
from inside the Courses component,

16
00:01:04,930 --> 00:01:08,730
we'll pass the match object
to the Courses function.

17
00:01:10,710 --> 00:01:15,510
Next, we'll pas the NavLinks
the portion of the URL to match,

18
00:01:15,510 --> 00:01:19,010
which you can access
from the url property.

19
00:01:19,010 --> 00:01:24,063
So for HTML, we'll replace the to
value with a set of curly braces and

20
00:01:24,063 --> 00:01:29,642
we'll create the paths using a template
literal that dynamically places or

21
00:01:29,642 --> 00:01:33,581
interpolates the value of
match.url into the path.

22
00:01:38,248 --> 00:01:43,408
And we'll do the same for CSS by
copying the expression we just wrote,

23
00:01:43,408 --> 00:01:48,131
pasting it in to the to value and
switching the path to /css, and

24
00:01:48,131 --> 00:01:50,773
we'll do the same for JavaScript.

25
00:01:54,982 --> 00:02:00,318
Over in our routes, we'll follow the same
steps, except this time interpolate

26
00:02:00,318 --> 00:02:05,160
the value of match.path which is
going to return the string /courses.

27
00:02:05,160 --> 00:02:09,854
So first, we'll pass the redirect

28
00:02:09,854 --> 00:02:14,554
route match.path to set the path.

29
00:02:14,554 --> 00:02:17,101
And then in the redirect component,

30
00:02:17,101 --> 00:02:22,704
set the two prop to an expression that
creates the path using a template literal.

31
00:02:30,518 --> 00:02:33,212
And we'll do the same for
the remaining routes.

32
00:02:33,212 --> 00:02:36,437
I'll simply copy this to value here and

33
00:02:36,437 --> 00:02:40,451
replace the HTML, CSS,
and JavaScript paths.

34
00:02:49,583 --> 00:02:55,540
Let's go over to the browser And
we're all set.

35
00:02:55,540 --> 00:02:58,010
Everything still works as expected.

36
00:02:58,010 --> 00:03:02,343
So now, even if we change the courses
path and URL down the road,

37
00:03:02,343 --> 00:03:06,771
our NavLinks and Routes will
always match and render correctly.

38
00:03:13,793 --> 00:03:17,201
Be sure to check the teacher's notes
of this video to learn more about

39
00:03:17,201 --> 00:03:17,920
route props.

40
00:03:18,960 --> 00:03:22,180
At this point you've learned enough about
React router to begin using it in your

41
00:03:22,180 --> 00:03:23,250
React apps.

42
00:03:23,250 --> 00:03:24,380
Well done.

43
00:03:24,380 --> 00:03:27,240
Coming up in the next stage,
you'll push your skills even further by

44
00:03:27,240 --> 00:03:30,770
learning how to create 404-like
error routes, past parameter and

45
00:03:30,770 --> 00:03:32,802
data to routes and
change routes programmatically.