Learn React Router 6

Learn React Router 6

This course is part of Advanced React Skills Specialization

Instructor: Bob Ziroll

Access provided by Kalinga Institute of Industrial Technology

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.