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 an <Redirect> component that instructs the router to redirect from one route to another.
Resources
Right now when you visit the Courses
section of the directory app,
0:00
the page displays the heading and
sub-navigation only.
0:03
The user needs to click one of
the topic links to view any content for
0:06
the section, but the user should
immediately see one of the course lists
0:10
when they first navigate to courses.
0:13
Now, one way we could quickly fix
this is by opening up Header.js,
0:16
and adding /html to the Courses link.
0:20
And this navigates you to courses/html
right when you click on the Courses link.
0:24
But notice how the Courses navlink
0:30
loses its active styles when you
click over to CSS or JavaScript.
0:33
Their URLs do not match
the /courses/html subpath defined here.
0:37
So, the link doesn't get
assigned that div class.
0:42
Instead of hardcoding the path
here in the NavLink component,
0:45
react-router provides an intelligent
redirect component that instructs
0:49
the router to redirect
from one route to another.
0:53
For example,
redirect from /courses to /courses/html.
0:55
So let's delete this subpath
from the courses link and
1:02
in courses.js, let's import
redirect from react-router-dom.
1:06
Over in my routes,
1:14
I will include a redirect component
just above the HTML route.
1:15
And redirect requires a to prop and the
value should be the URL to redirect to.
1:23
So for instance, if you set the value to
the root path and click the courses link,
1:30
since we've defined the redirect
from inside the courses component,
1:36
the router redirects from
the courses route to the home route.
1:40
So let's go back and
set it to redirect to /courses/html.
1:45
And now when you click over to Courses,
1:51
you immediately see
the list of HTML courses.
1:54
And clicking a subnavigation link
loads new content while keeping both
1:57
the topic and courses active.
2:02
Great, now we could stop here, but
watch what happens when I click on HTML,
2:04
CSS or JavaScript,
then click back to courses.
2:09
The courses page is blank.
2:14
We lose our redirect and if you refresh
the page, while viewing the CSS or
2:15
JavaScript course lists,
you're redirected back to courses/HTML.
2:21
Since we're redirecting
from deeply nested routes,
2:27
we need to make a few adjustments to
keep the URL in sync with the UI.
2:30
A better solution is to override
the existing courses route and
2:34
render a redirect component that
will navigate to the new location.
2:38
Remember, the redirect component
is like a regular react component.
2:42
So let's create a route that
matches the path /courses and
2:46
use the render prop to return
the redirect component.
2:54
So let's pass the render prop op
function that returns the redirect
3:00
component we just wrote.
3:05
And to renter this redirect when
the path is exactly /courses,
3:07
we need to include the exact prop.
3:15
Let's give this a save and
over in our app when we click courses,
3:19
the router still redirects YouTube horses
/html Click CSS, refresh, JavaScript.
3:25
Refresh and you remain at the same URL.
3:33
And clicking back to courses from here
displays the default list of HTML courses.
3:35
Great, it works.
3:40
You need to sign up for Treehouse in order to download course files.
Sign up