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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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