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
Let me show you how our app will look by the end of this stage!
This video doesn't have any notes.
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
[MUSIC]
0:00
The directory app is missing two
important features, the functionality of
0:05
the main navigation and the list of
courses in the Courses component.
0:09
No single page app is complete
without navigation that links users
0:14
to different sections of your app.
0:18
It's what users usually
interact with most.
0:22
Up until now, we've navigated
the directory app by manually
0:26
changing the URL in the address bar.
0:30
So in this stage, we'll use React Router's
Link and NavLink components
0:34
to allow users to move through the app
by clicking the links in the main menu.
0:39
Then we'll learn about descendant
routes and nested routes,
0:46
which will help us render the list
of courses in the Courses component.
0:50
The user will be able to click
on the sub-navigation links in
0:55
the Courses tab to display
the respective list of courses.
1:00
Lastly, we'll learn how to redirect users
using React Router's Navigate component.
1:05
So now when we enter /courses in the URL,
or click the Courses tab,
1:11
our app will navigate us to courses/html
and display the list of HTML courses.
1:17
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