Learn React Router 6

Seize the savings! Get 40% off 3 months of Coursera Plus and full access to thousands of courses.

Learn React Router 6

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.

15 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.

15 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 assignment Total 15 minutes

React Router Section 1 Graded Assignment 15 minutes

19 plugins Total 80 minutes

Welcome to interactive lessons! 1 minute
Introduction to React Router 6 3 minutes
Multi-page vs single-page apps 5 minutes
React Router Setup & BrowserRouter 3 minutes
Routes 3 minutes
BrowserRouter & Routes challenge 1 minute
Route, path, & element 4 minutes
Quick Re-org 1 minute
Links in React Router 4 minutes
VanLife project bootstrapping 8 minutes
Initial Deploy to Netlify 12 minutes
Mirage JS Server 2 minutes
Challenge: Vans Page - Part 1 2 minutes
Challenge: Vans Page - Part 2 9 minutes
Route Params - part 1 4 minutes
Route Params - part 2 2 minutes
Route Params part 3.1 - useParams() & challenge 5 minutes
Route Params part 3.2 - useParams() challenge 7 minutes
Route Params Quiz 4 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 assignment Total 20 minutes

React Router Section 2 Graded Assignment 20 minutes

23 plugins Total 126 minutes

Nested Routes Intro 9 minutes
Fixing the Navbar with a Layout Route 5 minutes
Fixing the Navbar with a Layout Route part 2 8 minutes
Bootstrap the Host pages 4 minutes
Nesting the /host routes 4 minutes
Creating the Host Layout 6 minutes
Relative Paths 4 minutes
Index Routes 4 minutes
To nest or not to nest? 5 minutes
Nested Routes Quiz 5 minutes
Add Footer 3 minutes
NavLink 7 minutes
Active Link Styling with NavLink 4 minutes
Active Link Styling with NavLink - part 2 5 minutes
Adding Host Vans Routes 5 minutes
🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages 3 minutes
Building out the Host Van Detail page 9 minutes
Relative Links 7 minutes
Back to all vans 5 minutes
Add /host/vans/:id Nested Routes 8 minutes
Add the Final Navbar! 7 minutes
Outlet Context 6 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 assignment Total 15 minutes

React Router Section 3 Graded Assignment 15 minutes

23 plugins Total 96 minutes

Search Params Intro 7 minutes
useSearchParams 4 minutes
Challenge: Set up search params in VanLife 5 minutes
Filter the array w/ the search param 5 minutes
Challenge: Filter the vans in VanLife 2 minutes
Using Links to add search params 3 minutes
Challenge: Filter the vans with Links 3 minutes
Using the search params setter function 4 minutes
Challenge: Filter the vans with a setter function 3 minutes
Caveats to setting params 2 minutes
Merging search params with Links 6 minutes
Merging search params with the setSearchParams function 5 minutes
Challenge: Conditional rendering practice 5 minutes
Fix remaining absolute paths 2 minutes
Back to all vans 2 minutes
Link state 6 minutes
useLocation 8 minutes
Challenge: conditionally render the back button text 3 minutes
404 Page 6 minutes
"Happy Path" vs. "Sad Path" 3 minutes
Quick update to our fetching code 3 minutes
Coding the Sad Path - Loading state 4 minutes
Coding the Sad Path - Error handling 5 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 assignment Total 10 minutes

React Router Section 4 Graded Assignment 10 minutes

12 plugins Total 40 minutes

Loaders intro 4 minutes
createBrowserRouter 6 minutes
Setting up the data router 3 minutes
Loader function 3 minutes
Challenge: Vans List Loader 1 minute
useLoaderData 2 minutes
Challenge: useLoaderData in Vans List page 2 minutes
Use the loader data instead of the useEffect 4 minutes
Loaders Quiz 3 minutes
Handling errors 3 minutes
Add errorElement to vans route 3 minutes
useRouteError 6 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 assignment Total 30 minutes

React Router Section 5 Graded Assignment 30 minutes

40 plugins Total 164 minutes

Initial Login Form 2 minutes
Note from the future: importing image assets in Vite 3 minutes
Protected Routes Intro 6 minutes
Protected Routes - AuthRequired Layout Route 4 minutes
Protected Routes - Conditionally send to /login page 4 minutes
Protected Routes Quiz 2 minutes
Protected Routes - with loaders 5 minutes
Protected Routes w/ loaders 4 minutes
Parallel Loaders demo 4 minutes
Challenge: Protected Routes w/ loaders 1 minute
Challenge: Protected Routes in VanLife - Part 1 2 minutes
Aside challenge: move remaining fetching to loaders - Part 1 6 minutes
Aside challenge: move remaining fetching to loaders - Part 2 4 minutes
Challenge: Protected Routes in VanLife - Part 2 8 minutes
Send login message prompt to login page 3 minutes
Consume message from search param on login page 8 minutes
Pass message to Login page 8 minutes
🌶️ Take: Forms in React are bad 2 minutes
Setting up for authentication - happy path 5 minutes
Setting up for authentication - sad path 8 minutes
useNavigate() 4 minutes
React Router Form Component 3 minutes
Setting up the Action function 4 minutes
Add form and action to VanLife 2 minutes
Action function - params 2 minutes
Action function - request 3 minutes
Get form data in VanLife 2 minutes
Use data in action to log in 3 minutes
Better (but still fake) auth 4 minutes
Challenge: send user to /host route after log in 3 minutes
Form replace 5 minutes
useActionData 4 minutes
Action error handling 3 minutes
Action error handling in VanLife 3 minutes
useNavigation() 4 minutes
useNavigation in VanLife 4 minutes
get previous route pathname 7 minutes
redirectTo - part 1 4 minutes
redirectTo - part 2 6 minutes
redirectTo in VanLife 5 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 assignment Total 30 minutes

React Router Section 6 Graded Assignment 30 minutes

18 plugins Total 73 minutes

Deferring data 3 minutes
Promises and defer() 6 minutes
defer getVans() 2 minutes
Await component 7 minutes
Await in Vans route 5 minutes
Await vans refactor 2 minutes
React Suspense 5 minutes
Suspense in VanLife 3 minutes
Putting it all together - defer, Await, Suspense in HostVans 5 minutes
errorElements in remaining van loading pages 3 minutes
Placeholders are gone! 🎉 2 minutes
Cloud Firestore Setup 🔥 6 minutes
Cloud Firestore Code Setup 3 minutes
Collection reference and getVans() function 7 minutes
Create getVan() function 5 minutes
Refactor getHostVans function 4 minutes
Final loose ends 2 minutes
Outro 3 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

(7 ratings)

Bob Ziroll

Scrimba

14 Courses 51,934 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
Status: Free Trial
Scrimba
Learn Advanced React
Course
Status: Free Trial
Scrimba
React Beginner Project: Build a Movie Search App
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
80%
4 stars
20%
3 stars
0%
2 stars
0%
1 star
0%

Showing 3 of 15

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

Open new doors with Coursera Plus

Unlimited access to 10,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Learn more

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Explore degrees

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Learn more

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.