Learn React Router 6

Learn React Router 6

This course is part of Advanced React Skills Specialization

Instructor: Bob Ziroll

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

6 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

Build your subject-matter expertise

This course is part of the Advanced React Skills Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

There are 6 modules in this course

Learn React Router v6, the most popular routing library for React applications and one of the most downloaded React support libraries ever.

In this course, you’ll learn the most important parts of the React Router (v6) library while building an app called “VanLife”, an app for renting decked-out travel vans for your next road trip adventure. This course is filled with interactive coding challenges, small and large, to help drill in the topics you’ll be learning, all while building the main VanLife project. Repetition and practice is the real way to avoid tutorial hell and build the muscle memory needed to truly understand what you’re learning. So if you’re looking to escape tutorial hell, this course (and Scrimba courses in general) is the way to go!

Take your first steps with React Router and become familiar with the course project, a cool van rental site.

What's included

1 assignment18 plugins

1 assignmentTotal 15 minutes

React Router Section 1 Quiz15 minutes

18 pluginsTotal 79 minutes

Introduction to React Router 63 minutes
Multi-page vs single-page apps5 minutes
React Router Setup & BrowserRouter3 minutes
Routes3 minutes
BrowserRouter & Routes challenge1 minute
Route, path, & element4 minutes
Quick Re-org1 minute
Links in React Router4 minutes
VanLife project bootstrapping8 minutes
Initial Deploy to Netlify12 minutes
Mirage JS Server2 minutes
Challenge: Vans Page - Part 12 minutes
Challenge: Vans Page - Part 29 minutes
Route Params - part 14 minutes
Route Params - part 22 minutes
Route Params part 3.1 - useParams() & challenge5 minutes
Route Params part 3.2 - useParams() challenge7 minutes
Route Params Quiz4 minutes

The learning module explores nested routes in React Router 6, which are used to create complex and hierarchical route structures within React applications.

What's included

1 assignment23 plugins

1 assignmentTotal 20 minutes

React Router Section 2 Quiz20 minutes

23 pluginsTotal 126 minutes

Nested Routes Intro9 minutes
Fixing the Navbar with a Layout Route5 minutes
Fixing the Navbar with a Layout Route part 28 minutes
Bootstrap the Host pages4 minutes
Nesting the /host routes4 minutes
Creating the Host Layout6 minutes
Relative Paths4 minutes
Index Routes4 minutes
To nest or not to nest?5 minutes
Nested Routes Quiz5 minutes
Add Footer3 minutes
NavLink7 minutes
Active Link Styling with NavLink4 minutes
Active Link Styling with NavLink - part 25 minutes
Adding Host Vans Routes5 minutes
🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages3 minutes
Building out the Host Van Detail page9 minutes
Relative Links7 minutes
Back to all vans5 minutes
Add /host/vans/:id Nested Routes8 minutes
Add the Final Navbar!7 minutes
Outlet Context6 minutes
Update deployed version on Netlify!3 minutes

This module dives into the usage of search params and links in React Router 6, empowering developers to implement navigation with query parameters in their React applications.

What's included

1 assignment23 plugins

1 assignmentTotal 15 minutes

React Router Section 3 Quiz15 minutes

23 pluginsTotal 96 minutes

Search Params Intro7 minutes
useSearchParams4 minutes
Challenge: Set up search params in VanLife5 minutes
Filter the array w/ the search param5 minutes
Challenge: Filter the vans in VanLife2 minutes
Using Links to add search params3 minutes
Challenge: Filter the vans with Links3 minutes
Using the search params setter function4 minutes
Challenge: Filter the vans with a setter function3 minutes
Caveats to setting params2 minutes
Merging search params with Links6 minutes
Merging search params with the setSearchParams function5 minutes
Challenge: Conditional rendering practice5 minutes
Fix remaining absolute paths2 minutes
Back to all vans2 minutes
Link state6 minutes
useLocation8 minutes
Challenge: conditionally render the back button text3 minutes
404 Page6 minutes
"Happy Path" vs. "Sad Path"3 minutes
Quick update to our fetching code3 minutes
Coding the Sad Path - Loading state4 minutes
Coding the Sad Path - Error handling5 minutes

This module explores into loaders and errors in React Router 6, which are used to handle loading states and error handling within their applications' routing components.

What's included

1 assignment12 plugins

1 assignmentTotal 10 minutes

React Router Section 4 Quiz10 minutes

12 pluginsTotal 40 minutes

Loaders intro4 minutes
createBrowserRouter6 minutes
Setting up the data router3 minutes
Loader function3 minutes
Challenge: Vans List Loader1 minute
useLoaderData2 minutes
Challenge: useLoaderData in Vans List page2 minutes
Use the loader data instead of the useEffect4 minutes
Loaders Quiz3 minutes
Handling errors3 minutes
Add errorElement to vans route3 minutes
useRouteError6 minutes

Explore Actions and Protected Routes in React Router 6,. Learn to implement authentication and authorization by protecting routes and performing actions based on user roles or permissions.

What's included

1 assignment40 plugins

1 assignmentTotal 30 minutes

React Router Section 5 Quiz30 minutes

40 pluginsTotal 164 minutes

Initial Login Form2 minutes
Note from the future: importing image assets in Vite3 minutes
Protected Routes Intro6 minutes
Protected Routes - AuthRequired Layout Route4 minutes
Protected Routes - Conditionally send to /login page4 minutes
Protected Routes Quiz2 minutes
Protected Routes - with loaders5 minutes
Protected Routes w/ loaders4 minutes
Parallel Loaders demo4 minutes
Challenge: Protected Routes w/ loaders1 minute
Challenge: Protected Routes in VanLife - Part 12 minutes
Aside challenge: move remaining fetching to loaders - Part 16 minutes
Aside challenge: move remaining fetching to loaders - Part 24 minutes
Challenge: Protected Routes in VanLife - Part 28 minutes
Send login message prompt to login page3 minutes
Consume message from search param on login page8 minutes
Pass message to Login page8 minutes
🌶️ Take: Forms in React are bad2 minutes
Setting up for authentication - happy path5 minutes
Setting up for authentication - sad path8 minutes
useNavigate()4 minutes
React Router Form Component3 minutes
Setting up the Action function4 minutes
Add form and action to VanLife2 minutes
Action function - params2 minutes
Action function - request3 minutes
Get form data in VanLife2 minutes
Use data in action to log in3 minutes
Better (but still fake) auth4 minutes
Challenge: send user to /host route after log in3 minutes
Form replace5 minutes
useActionData4 minutes
Action error handling3 minutes
Action error handling in VanLife3 minutes
useNavigation()4 minutes
useNavigation in VanLife4 minutes
get previous route pathname7 minutes
redirectTo - part 14 minutes
redirectTo - part 26 minutes
redirectTo in VanLife5 minutes

This module delves into deferred data in React Router 6, which allows developers to efficiently load and display data on-demand for specific routes, improving performance and user experience.