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
You're ready to declare more routes on your own! The directory still needs to display the lists of courses inside the ''Courses" component. In this challenge, you're going to declare the routes for the HTML, CSS and JavaScript course list components.
We've covered a lot of material so
far, and
0:00
you're ready to declare
more routes on your own.
0:02
The directory still needs
to display the list of
0:04
courses inside the courses component.
0:07
So now I'd like you to create
the routes for the HTML, CSS and
0:09
JavaScript course list components.
0:13
Let's go over what you'll need to do.
0:15
In this challenge, you are going to
be working in the file Courses.js,
0:17
and the HTML, CSS, and JavaScript
components you are going to render
0:21
are located here inside
the Courses directory.
0:25
In the app, when you click over
to Courses, you should be able to
0:28
click on a subnavigation link and see a
list of courses for that topic, like this.
0:33
Now as you navigate between the different
course routes, the course's heading and
0:38
sub navigation should always
display above the HTML, CSS, and
0:43
JavaScript course lists.
0:48
So you'll need to nest the routes inside
0:50
the courses component like you
did earlier in the app component.
0:52
And the sub navigation should
also display an active link
0:56
when the user clicks to view a topic.
1:00
I've already included the CSS for
the active links,
1:03
and I've included the URL paths for
each link here in courses.js.
1:07
So this is a great way to practice what
you've learned so far about routing.
1:11
In the next video,
I'll show you how I did it.
1:15
Good luck and have fun.
1:17
You need to sign up for Treehouse in order to download course files.
Sign up