TOIT Training

Facebook X-twitter Linkedin Instagram
Menu
Intermediate
React Courses

Learn React Router 6

Overview
Curriculum
  • 6 Sections
  • 135 Lessons
  • 10h Duration
Collapse All
 Introduction to React Router
19 Lessons
  1. Introduction to React Router 6
  2. Multi-Page vs Single-Page Apps
  3. React Router Setup & BrowserRouter
  4. Routes
  5. BrowserRouter & Routes Challenge
  6. Route, Path, & Element
  7. Quick Re-Org
  8. Link
  9. VanLife Project Bootstrapping
  10. Initial Deploy to Netlify
  11. Mirage JS Server
  12. Challenge: Vans Page – Part 1
  13. Challenge: Vans Page – Part 2
  14. Route Params – Part 1
  15. Route Params – Part 2
  16. Route Params Part 3.1 – useParams() & Challenge
  17. Route Params Part 3.2 – useParams() Challenge
  18. Route Params Quiz
  19. Get Detailed Reviews of Your React Projects – Scrimba Bootcamp
Nested Routes
23 Lessons
  1. Nested Routes Intro
  2. Fixing the Navbar with a Layout Route
  3. Fixing the Navbar with a Layout Route Part 2
  4. Bootstrap the Host Pages
  5. Nesting the /Host Routes
  6. Creating the Host Layout
  7. Relative Paths
  8. Index Routes
  9. To Nest or Not to Nest?
  10. Nested Routes Quiz
  11. Add Footer
  12. NavLink
  13. Active Link Styling with NavLink
  14. Active Link Styling with NavLink – Part 2
  15. Adding Host Vans Routes
  16. 🔀 Optional Side Quest – Building Out the Host Vans List and Detail Pages
  17. Building Out the Host Van Detail Page
  18. Relative Links
  19. Back to All Vans
  20. Add /Host/Vans/:Id Nested Routes
  21. Add the Final Navbar!
  22. Outlet Context
  23. Update Deployed Version on Netlify!
Search Params and Links
23 Lessons
  1. Search Params Intro
  2. useSearchParams
  3. Challenge: Set Up Search Params in VanLife
  4. Filter the Array W/ the Search Param
  5. Challenge: Filter the Vans in VanLife
  6. Using Links to Add Search Params
  7. Challenge: Filter the Vans with Links
  8. Using the Search Params Setter Function
  9. Challenge: Filter the Vans with a Setter Function
  10. Caveats to Setting Params
  11. Merging Search Params with Links
  12. Merging Search Params with the setSearchParams Function
  13. Challenge: Conditional Rendering Practice
  14. Fix Remaining Absolute Paths
  15. Back to All Vans
  16. Link State
  17. useLocation
  18. Challenge: Conditionally Render the Back Button Text
  19. 404 Page
  20. “Happy Path” vs. “Sad Path”
  21. Quick Update to Our Fetching Code
  22. Coding the Sad Path – Loading State
  23. Coding the Sad Path – Error Handling
Loaders and Errors
12 Lessons
  1. Loaders Intro
  2. createBrowserRouter
  3. Setting Up the Data Router
  4. Loader Function
  5. Challenge: Vans List Loader
  6. useLoaderData
  7. Challenge: useLoaderData in Vans List Page
  8. Use the Loader Data Instead of the useEffect
  9. Loaders Quiz
  10. Handling Errors
  11. Add errorElement to Vans Route
  12. useRouteError
 Actions and Protected Routes
40 Lessons
  1. Initial Login Form
  2. Note from the Future: Importing Image Assets in Vite
  3. Protected Routes Intro
  4. Protected Routes – AuthRequired Layout Route
  5. Protected Routes – Conditionally Send to /Login Page
  6. Protected Routes Quiz
  7. Protected Routes – with Loaders
  8. Protected Routes W/ Loaders
  9. Parallel Loaders Demo
  10. Challenge: Protected Routes W/ Loaders
  11. Challenge: Protected Routes in VanLife – Part 1
  12. Aside Challenge: Move Remaining Fetching to Loaders – Part 1
  13. Aside Challenge: Move Remaining Fetching to Loaders – Part 2
  14. Challenge: Protected Routes in VanLife – Part 2
  15. Send Login Message Prompt to Login Page
  16. Consume Message from Search Param on Login Page
  17. Pass Message to Login Page
  18. 🌶️ Take: Forms in React Are Bad
  19. Setting Up for Authentication – Happy Path
  20. Setting Up for Authentication – Sad Path
  21. useNavigate()
  22. React Router Form Component
  23. Setting Up the Action Function
  24. Add Form and Action to VanLife
  25. Action Function – Params
  26. Action Function – Request
  27. Get Form Data in VanLife
  28. Use Data in Action to Log In
  29. Better (But Still Fake) Auth
  30. Challenge: Send User to /Host Route After Log In
  31. Form Replace
  32. useActionData
  33. Action Error Handling
  34. Action Error Handling in VanLife
  35. useNavigation()
  36. useNavigation in VanLife
  37. Get Previous Route Pathname
  38. RedirectTo – Part 1
  39. RedirectTo – Part 2
  40. RedirectTo in VanLife
Deferred Data
18 Lessons
  1. Deferring Data
  2. Promises and Defer()
  3. Defer getVans()
  4. Await Component
  5. Await in Vans Route
  6. Await Vans Refactor
  7. React Suspense
  8. Suspense in VanLife
  9. Putting It All Together – Defer, Await, Suspense in HostVans
  10. errorElements in Remaining Van Loading Pages
  11. Placeholders Are Gone! 🎉
  12. Cloud Firestore Setup 🔥
  13. Cloud Firestore Code Setup
  14. Collection Reference and getVans() Function
  15. Create getVan() Function
  16. Refactor getHostVans Function
  17. Final Loose Ends
  18. Outro

 

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

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below: