Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Router v6 Basics

Well done!

You have completed React Router v6 Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Navigating, Nesting and Redirecting Routes Recap

2:10 with Laura Coronel

Let’s go over the key concepts you learned in this stage.

In this stage you learned the most important parts of React Router. 0:00
We made our app interactive by incorporating React Router's Link 0:04
component in our main navigation bar. 0:08
We then swap the Link tags for 0:10
the NavLink component which automatically adds the active class to the link. 0:12
Remember, you can customize the class name and style by providing NavLink, 0:18
the class name, and style prop. 0:22
Then we focused on getting the sub navigation to display a list of courses 0:25
when a user clicks a course link. 0:29
We started by creating descendant routes to render the list of courses in 0:32
the Courses component. 0:36
While creating these routes, we learned that we can pass relative paths 0:38
to React Router's Route, Link, and NavLink components. 0:43
Remember, when you have descendant routes, 0:47
you must add the forward /* to the end of the parent route path. 0:50
Otherwise, the descendant routes won't render to the page. 0:55
We then turned our descendant routes into nested routes, so 0:59
that all our Routes are in one location, the main App component. 1:03
With all the Routes in one file, 1:08
we needed a way to let React Router know where to render the list of courses, and 1:10
that's where React Router's Outlet component came in. 1:14
The Outlet component allows nested UI to show up when the child route renders. 1:18
We then had an issue where the list of courses didn't render on the page when 1:24
the user navigates to the Courses tab. 1:28
We fixed that by using the Navigate component to redirect users to 1:31
courses/html when they visited the courses URL. 1:36
We created an index route which called the Navigate component when the route 1:41
match the courses URL. 1:45
Lastly, we made sure to pass navigate the replace prop to fix the loop the user 1:48
experiences as they try to navigate back through the history stack. 1:52
At this point, you know enough about React Router to begin using it and 1:57
your React apps, well done. 2:01
All your routes are in place and users can easily navigate through the directory app. 2:04