Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
React Router provides a Navigate component that instructs the router to navigate to another route.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Right now when you visit the Courses
section of the directory app,
0:00
the page displays the heading and
sub navigation only.
0:04
The user needs to click one of
the topic links to view any content for
0:09
this section.
0:13
But the user should immediately see one
of the course lists when they first
0:15
navigate to courses.
0:20
Now one way we could quickly
fix this is by opening up
0:23
Header.js and
adding /html to the Courses link.
0:28
And this navigates you to courses/html
right when you click Courses.
0:34
But notice how the Courses nav link
loses its active styles when you
0:40
click over to CSS or JavaScript.
0:45
Their URLs do not match
the courses/html sub path defined here.
0:49
So the link doesn't get
assigned the active class.
0:55
Instead of hard coding the path
here in the nav link component,
1:00
React Router provides an intelligent
navigate component that
1:04
instructs the router to navigate
from one route to another,
1:09
for example,
navigate from /courses to /courses/html.
1:13
So let's delete the sub path
from the Courses link and
1:18
in App.js, let's import
Navigate from react-router-dom.
1:24
Over my routes, we'll include a Route
component above the HTML route.
1:31
This route will call the navigate
tag when the URL path is /courses.
1:38
There are three different ways
of setting the path prop.
1:45
One way is setting the path
prop to an absolute
1:50
path by having the path
start with a forward slash.
1:53
So for us, we want the navigation
to happen at /courses.
1:58
We can also use a relative path here.
2:04
We'll set path to an empty string,
because this route is a nested route.
2:08
So that means its path is built off
of the parent route path, /courses.
2:14
The last way is passing the index
prop instead of the path prop.
2:22
You can think of index as
a default child route.
2:27
When you want to create a nested route
with the same URL path as its parent,
2:32
you'll swap the path prop for
the index prop.
2:37
All right, let's continue.
2:42
When the URL path is the same as
the parent route path /courses,
2:44
we want the route to run the Navigate tag.
2:50
So in the element prop,
pass the Navigate tag.
2:54
Navigate requires a to prop, and the value
should be the URL to navigate to.
2:58
For instance, if you set the value to
the root path and click the Courses link,
3:07
the router redirects from
the Courses route to the Home route.
3:13
Let's set it to navigate to /courses/html,
or
3:19
we can pass a relative link
by setting it to HTML.
3:25
Now when you click over to Courses, you'll
immediately see the list of HTML courses.
3:31
And clicking a sub navigation
link loads new content while
3:39
keeping both the topic and
Courses links active, great.
3:43
Now we could stop here, but
3:49
watch what happens when I try
to go back in the history stack.
3:51
We eventually get stuck
in a navigate loop.
3:56
What's happening here is that
when I click the back arrow,
3:59
the browser is trying to
take us to /courses, but
4:04
our app then navigates us to courses/html.
4:08
And every time we click the back arrow,
we are stuck in this loop.
4:12
This is happening because Navigate
adds to the history stack.
4:16
Instead, we can tell Navigate
to replace the URL /courses
4:21
in the history stack with
the URL /courses/html.
4:27
We do this by passing the prop
replace to the Navigate tag and
4:35
setting its value to true.
4:40
You can also just write replace,
because in React,
4:43
if you don't pass a value to a prop,
by default,
4:47
React treats the prop as a Boolean
prop that resolves to true.
4:51
In the browser,
let's navigate through the app, and
4:58
now let's navigate back
through the history stack.
5:01
And the navigation loop is gone,
5:05
we're able to navigate completely
through the history stack.
5:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up