"Introduction to Auto Layout in iOS" was retired on May 31, 2020.
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
You can render a Route component anywhere you need one, including deep within the component tree of another Route component. OR you can nest Route components inside one another.
VS Code Shortcuts Used
-
Multiple Selections - VS Code
- Mac:
Cmd+Shift+L - Windows:
Ctrl+Shift+L - Linux:
Ctrl+Shift+L
- Mac:
-
Format Document - VS Code
- Mac:
Option+Shift+F - Windows:
Alt+Shift+F - Linux:
Ctrl+Shift+I
- Mac:
Resources
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
The directory still needs to
display the list of courses inside
0:00
the courses component.
0:04
In the app, when you click over to
Courses you should be able to click
0:06
on a sub navigation link and see the list
of courses for that topic, like this.
0:11
We need to create the route for the HTML,
0:18
CSS, and
JavaScript Course List components.
0:21
In React Router, you can render route
components anywhere in your app.
0:24
Since we want the HTML, CSS, and
JavaScript course list to appear
0:30
in the courses component Let's
create the routes in Courses.js.
0:36
The routes we'll create here
are called descendant routes.
0:42
Descendant routes are routes
that are not written in the main
0:46
routes component but
elsewhere in the component tree.
0:51
These routes weren't
the same as any other routes
0:55
except it automatically builds
on the path of the parent route.
0:59
In our case the path of
the parent route is courses.
1:04
In the file Courses.js,
let's import the HTML, CSS,
1:09
and JavaScript components located
inside the courses directory.
1:14
Import HTML from ./courses/ HTML.
1:21
Import CSS from ./courses/CSS
1:29
And import JavaScript from
./courses//JavaScript.
1:37
Now the courses heading and sub navigation
needs to be present at all times,
1:44
just above the HTML, CSS, and
JavaScript components were rendering.
1:50
So to render the components here
inside the courses component,
1:56
we'll first need to import the routes and
route components from React Router DOM.
2:02
Below the sub navigation,
we'll add the routes tag and
2:09
nest three routes, one for each topic.
2:13
We'll add the route component and
pass it the path and element prop.
2:17
We want the HTML component to render
when the URL is /courses/HTML.
2:22
So in element,
pass the HTML component tag.
2:30
Now, like I said earlier,
this is a descendant route, so
2:36
its path is built off of
its parent route path.
2:41
Since the parent route path is courses,
2:45
we just need to pass
HTML to our route tag.
2:49
And this route will
render the HTML component
2:54
when the URL matches courses/HTML.
2:59
Let's copy this route tag twice.
3:04
When the URL is /courses/CSS,
3:07
this route will render the CSS component.
3:11
We'll render the JavaScript component
when the URL is /courses/JavaScript.
3:16
Next, to link the route
let's import the Nav link
3:26
component at the top of Courses.js, and
3:31
replace the a tags in the sub
navigation with Navlink components.
3:34
We'll first highlight
the opening a tag and href.
3:40
Then use a shortcut cmd+ Shift
+ L to enter NavLink to.
3:45
Now let's select the closing a tags and
use our shortcut again to enter NavLink.
3:51
Now let's have the NavLink component
point to the courses/html,
3:58
Courses/CSS, and
courses/JavaScript URL paths.
4:07
When NavLinks are nested in a route,
4:16
we can take advantage of passing
a relative link to the to prop.
4:18
Relative links are links that
don't start with a forward slash.
4:23
Instead, they will inherit
the closest route in
4:29
which they are rendered,
in our case, /courses.
4:33
When your app gets bigger,
using relative links makes it easy to
4:38
link into deeper URLs without
having to know the entire path.
4:43
So we can remove the /courses/
from the to props.
4:48
In the browser,
when you click over to courses,
4:57
then HTML, we only see the header.
5:01
Let's investigate this,
in the console we see two warnings.
5:04
The first warning says you render
descendant routes at /courses,
5:09
but the parent route
path has no trailing *.
5:16
This means, if you navigate deeper,
the parent won't match anymore,
5:21
and therefore,
the child routes will never render.
5:26
Awesome, this is a very helpful warning.
5:29
It's telling us we need to add a trailing
asterik in the parent route path.
5:33
So in the file App.js, let's add
the asterisk like the warning asked us to.
5:39
In react,
the asterisk is a wild-card character.
5:47
Whenever a URL starts with courses,
forward slash,
5:51
routes will match the URL with this
route and render the courses component.
5:56
We can see this in action.
6:02
When we change the URL
to courses slash Hello,
6:04
we can see that courses
component is rendered.
6:07
We can also see the courses component
being rendered in React dev tools.
6:11
Now when you click HTML,
you will see the list of HTML courses.
6:17
Click CSS, and you'll see the CSS courses.
6:23
And clicking JavaScript,
displays the JavaScript courses.
6:27
And notice how the sub navigation
link remains active when
6:32
its corresponding path is
the active path in the URL.
6:36
Another way we could have done this,
6:41
is with nested route
instead of descended route.
6:43
As the name implies,
routes can be nested inside one another.
6:47
So in the file App.js will nest the HTML,
CSS, and
6:52
JavaScript route in the parent route path.
6:57
So first, we'll change the self-closing
route tag to an open and
7:01
closing route tag.
7:06
We'll cut the route tags from
Courses.js and delete the routes tag.
7:07
In App.js, I'll paste the route tags
inside the opening and closing route tag.
7:16
And we can use the shortcut
Option+Shift+F in Visual Studio code to
7:24
fix our formatting for us.
7:28
Now let's cut out the import
statements for the HTML, CSS, and
7:30
JavaScript components.
7:35
We'll remove the routes and
route from the import statement since
7:38
it's no longer being used
in the courses component.
7:43
In the file App.js,
we'll paste the import statements here and
7:47
update the file path by adding
components to the front of each of them.
7:52
Rendering nested routes works differently
than rendering descendant routes.
8:00
In decendant routes, we added the /*,
to the end of the parent route path.
8:05
With nested routes, the /* is not needed,
8:13
because the route tags are all
inside the main routes tag.
8:17
But now we need to indicate where
in the parent component the nested
8:24
route should be rendered.
8:29
And that's where react routers
outlet component comes in.
8:31
The outlet component is placed
inside the parent component,
8:36
indicating where exactly
the nested routes should render.
8:41
So in our case,
8:46
we want the list of courses to render
under the course navigation buttons.
8:47
But first, let's import outlet
at the top of Courses.js.
8:53
And place the outlet tag where our
routes tag or previously located.
9:00
And we'll give this a save.
9:06
In the browser,
our app is working just like we expected.
9:09
You can use either descendant routes or
9:13
nested routes when you need
to render a child component.
9:16
I like to use nested routes so
that all my route tags are in one file.
9:21
In the next video, I'll cover why
you see a blank Courses page when
9:27
you first navigate to /courses and
how to fix this.
9:32
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