"Closures in Swift 2" was retired on May 31, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Router v6 Basics!
You have completed React Router v6 Basics!
Preview
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