Learn React Router 6

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

• 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
• useNavigation
• useLocation
• useLoaderData
• useActionData
• Protected Routes
• Deploying with Netlify
• Using Firebase for data storage

• Introduction to React Router
• 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. A11y Update - wrapping complex content in a link
• 17. Route Params part 3.1 - useParams() & challenge
• 18. Route Params part 3.2 - useParams() challenge
• 19. Route Params Quiz
• 20. Get detailed reviews of your React projects – Scrimba Bootcamp
• Nested Routes
• 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
• 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
• 24. Update: Accessibility Addition (React Router Standalone)
• Loaders and Errors
• 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
• 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
• 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