Learn React Router 6

3 days left! Get one of our best deals with Coursera Plus for $199 (usually $399). Save now.

Learn React Router 6

Name: Learn React Router 6
Rating: 4.823529411764706 (17 reviews)

This course is part of Advanced React Skills Specialization

Instructor: Bob Ziroll

Included with

Learn more

6 modules

Gain insight into a topic and learn the fundamentals.

17 reviews

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

6 modules

Gain insight into a topic and learn the fundamentals.

17 reviews

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

Skills you'll gain

Tools you'll learn

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

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

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

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 assignment19 plugins

1 assignmentTotal 15 minutes

React Router Section 1 Graded Assignment15 minutes

19 pluginsTotal 80 minutes

Welcome to interactive lessons!1 minute
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 Graded Assignment20 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 Graded Assignment15 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 Graded Assignment10 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 Graded Assignment30 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.

What's included

1 assignment18 plugins

1 assignmentTotal 30 minutes

React Router Section 6 Graded Assignment30 minutes

18 pluginsTotal 73 minutes

Deferring data3 minutes
Promises and defer()6 minutes
defer getVans()2 minutes
Await component7 minutes
Await in Vans route5 minutes
Await vans refactor2 minutes
React Suspense5 minutes
Suspense in VanLife3 minutes
Putting it all together - defer, Await, Suspense in HostVans5 minutes
errorElements in remaining van loading pages3 minutes
Placeholders are gone! 🎉2 minutes
Cloud Firestore Setup 🔥6 minutes
Cloud Firestore Code Setup3 minutes
Collection reference and getVans() function7 minutes
Create getVan() function5 minutes
Refactor getHostVans function4 minutes
Final loose ends2 minutes
Outro3 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Instructor ratings

(8 ratings)

Bob Ziroll

Scrimba

14 Courses55,980 learners

Offered by

Scrimba

Explore more from Mobile and Web Development

Status: Free Trial
Packt
Applied React – Projects, Routing & State
Course
Status: Free Trial
Scrimba
Learn React
Course
Packt
React JS Portfolio Builder 2026 - Hands-On Beginner Workshop
Course
Status: Preview
SkillsBooster Academy
Mastering Next.js: Build Full-Stack Applications
Course

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Learner reviews

5 stars
82.35%
4 stars
17.64%
3 stars
0%
2 stars
0%
1 star
0%

Showing 3 of 17

Reviewed on Feb 20, 2025

good course,but working with Firebase was not easy..

Reviewed on Dec 4, 2023

This course is fantastic throughout and it teaches you way more than the name specifies. Perfect for slow but detailed learners like myself!

Reviewed on Nov 2, 2024

Extremely well thought out course. Great teaching style

View more reviews

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.