Learn React Router 6

0 (0)

Duration

10h

Students

0

Level

Intermediate

Last Updated

February 27, 2025

Learn React Router 6

Overview
Curriculum
Reviews

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

6 Sections
135 Lessons
10h Duration

Expand All

Introduction to React Router

19 Lessons

Introduction to React Router 6
Multi-Page vs Single-Page Apps
React Router Setup & BrowserRouter
Routes
BrowserRouter & Routes Challenge
Route, Path, & Element
Quick Re-Org
Link
VanLife Project Bootstrapping
Initial Deploy to Netlify
Mirage JS Server
Challenge: Vans Page – Part 1
Challenge: Vans Page – Part 2
Route Params – Part 1
Route Params – Part 2
Route Params Part 3.1 – useParams() & Challenge
Route Params Part 3.2 – useParams() Challenge
Route Params Quiz
Get Detailed Reviews of Your React Projects – Scrimba Bootcamp

Nested Routes

23 Lessons

Nested Routes Intro
Fixing the Navbar with a Layout Route
Fixing the Navbar with a Layout Route Part 2
Bootstrap the Host Pages
Nesting the /Host Routes
Creating the Host Layout
Relative Paths
Index Routes
To Nest or Not to Nest?
Nested Routes Quiz
Add Footer
NavLink
Active Link Styling with NavLink
Active Link Styling with NavLink – Part 2
Adding Host Vans Routes
🔀 Optional Side Quest – Building Out the Host Vans List and Detail Pages
Building Out the Host Van Detail Page
Relative Links
Back to All Vans
Add /Host/Vans/:Id Nested Routes
Add the Final Navbar!
Outlet Context
Update Deployed Version on Netlify!

Search Params and Links

23 Lessons

Search Params Intro
useSearchParams
Challenge: Set Up Search Params in VanLife
Filter the Array W/ the Search Param
Challenge: Filter the Vans in VanLife
Using Links to Add Search Params
Challenge: Filter the Vans with Links
Using the Search Params Setter Function
Challenge: Filter the Vans with a Setter Function
Caveats to Setting Params
Merging Search Params with Links
Merging Search Params with the setSearchParams Function
Challenge: Conditional Rendering Practice
Fix Remaining Absolute Paths
Back to All Vans
Link State
useLocation
Challenge: Conditionally Render the Back Button Text
404 Page
“Happy Path” vs. “Sad Path”
Quick Update to Our Fetching Code
Coding the Sad Path – Loading State
Coding the Sad Path – Error Handling

Loaders and Errors

12 Lessons

Loaders Intro
createBrowserRouter
Setting Up the Data Router
Loader Function
Challenge: Vans List Loader
useLoaderData
Challenge: useLoaderData in Vans List Page
Use the Loader Data Instead of the useEffect
Loaders Quiz
Handling Errors
Add errorElement to Vans Route
useRouteError

Actions and Protected Routes

40 Lessons

Initial Login Form
Note from the Future: Importing Image Assets in Vite
Protected Routes Intro
Protected Routes – AuthRequired Layout Route
Protected Routes – Conditionally Send to /Login Page
Protected Routes Quiz
Protected Routes – with Loaders
Protected Routes W/ Loaders
Parallel Loaders Demo
Challenge: Protected Routes W/ Loaders
Challenge: Protected Routes in VanLife – Part 1
Aside Challenge: Move Remaining Fetching to Loaders – Part 1
Aside Challenge: Move Remaining Fetching to Loaders – Part 2
Challenge: Protected Routes in VanLife – Part 2
Send Login Message Prompt to Login Page
Consume Message from Search Param on Login Page
Pass Message to Login Page
🌶️ Take: Forms in React Are Bad
Setting Up for Authentication – Happy Path
Setting Up for Authentication – Sad Path
useNavigate()
React Router Form Component
Setting Up the Action Function
Add Form and Action to VanLife
Action Function – Params
Action Function – Request
Get Form Data in VanLife
Use Data in Action to Log In
Better (But Still Fake) Auth
Challenge: Send User to /Host Route After Log In
Form Replace
useActionData
Action Error Handling
Action Error Handling in VanLife
useNavigation()
useNavigation in VanLife
Get Previous Route Pathname
RedirectTo – Part 1
RedirectTo – Part 2
RedirectTo in VanLife

Deferred Data

18 Lessons

Deferring Data
Promises and Defer()
Defer getVans()
Await Component
Await in Vans Route
Await Vans Refactor
React Suspense
Suspense in VanLife
Putting It All Together – Defer, Await, Suspense in HostVans
errorElements in Remaining Van Loading Pages
Placeholders Are Gone! 🎉
Cloud Firestore Setup 🔥
Cloud Firestore Code Setup
Collection Reference and getVans() Function
Create getVan() Function
Refactor getHostVans Function
Final Loose Ends
Outro

0

0 Ratings

5 Star 0%

4 Star 0%

3 Star 0%

2 Star 0%

1 Star 0%

Reviews

Free

Course Includes

What are SPAs?
Basic router setup
Route
Link
Route parameters
Nested routes and Outlet
Layout and Index routes
Relative paths
NavLink
Outlet context
Search parameters
Link state
404 page / Splat routes
Loaders
Actions
Form & form data
defer()
Await
Suspense
Error handling & errorElement
useRouteError
useNavigate
useLocation
useLoaderData
useActionData
Protected Routes
Deploying with Netlify
Using Firebase for data storage