Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Learn React Router 6

Go to class Write review

Details

Go to class

Provider

Scrimba
Pricing

Free Online Course
Languages

English
Duration & workload

8 hours 55 minutes
Sessions

On-Demand
Level

Intermediate

Found in

Overview

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

Syllabus

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

Reviews

Start your review of Learn React Router 6