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
React Router is just a set of React components, which mean it’s components will display in React DevTools. Let’s add filters to our React DevTools to clean up our component tree to make debugging easier.
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
In the previous video,
I asked you to write the routes for
0:00
the Teachers and Courses components.
0:04
If you haven't created them yet,
that's okay.
0:07
We'll write them now.
0:10
So first, let's import the Teachers and
Courses components in App.js.
0:12
We'll import Teachers from
"./components/Teachers" and
0:21
import Courses from "./components/Courses".
0:28
Now we'll render these components into
App at their respective paths using
0:35
the Route component.
0:40
So below the About route,
I'll include a new route for
0:42
teachers where path="teachers" and
0:47
element to render will be
the Teachers component.
0:50
Below that include a new route for
Courses.
0:55
So I'll set path to courses and
element to Courses.
0:58
Now each route should render its assigned
component when its path matches the URL.
1:07
Let's try this out.
1:14
Over in the browser, if I change
the URL to /teachers,
1:15
we see the Teachers component
displaying the list of teachers.
1:20
Change it to /courses, and
we'll see the Courses component.
1:26
Great, there aren't any
courses listed here yet.
1:31
You will be adding those
later in this course.
1:35
Remember earlier when I
mentioned that React Router is
1:38
just a set of React components?
1:42
Well, if you open up the React
DevTools in your browser,
1:45
you'll see the React components
React Router is currently using.
1:48
As your app gets bigger, React DevTools
will start getting cluttered
1:55
with your components and
the components created by React Router.
2:00
To help keep my React DevTools clean,
2:04
I like to add filters to only
show the components I've built.
2:07
Click the settings icon and
make sure you're in the Components tab.
2:12
The first filter is to hide any
components with the word Route in it.
2:17
Once I turn this filter on,
2:21
all the components that
match the filter are hidden.
2:23
The next filter is to filter
out the context components.
2:28
You'll learn more about context
later in the React curriculum.
2:33
The last two filters won't filter out
anything right now, but they will come
2:37
in handy later in this course when
we create links and nested routes.
2:42
Now you don't have to hide
the React Router components,
2:48
I find that this helps me out when
I'm debugging my own components or
2:52
I just wanna focus on the components
being rendered to the page.
2:57
Also, React doesn't render any of
the routing components to the actual DOM,
3:03
they just manage what gets rendered.
3:08
If I switch over to the Elements
tab in Chrome Dev Tools,
3:11
you will see just the HTML for our app.
3:16
And it's displaying the mark up for
the About component only.
3:19
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