scrimba
Advanced React
Routing
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
PricingCoursesLog in
For TeamsWhy Scrimba?
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
Pricing
PricingCreate Account
Log in
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardConnect to DiscordFind a courseSettingsNew scrim
Log out

Routing

This playlist is part of Advanced React

Routing

86 lessons6 hours 24 min

1. Introduction to React Router 6
2:54
2. Multi-page vs single-page apps
5:13
3. React Router Setup & BrowserRouter
3:12
4. Routes
2:40
5. BrowserRouter & Routes challenge
1:06
6. Route, path, & element
4:12
7. Quick Re-org
1:01
8. Link
3:59
9. VanLife project bootstrapping
8:03
10. Initial Deploy to Netlify
11:41
11. Mirage JS Server
1:50
12. Challenge: Vans Page - Part 1
2:14
13. Challenge: Vans Page - Part 2
9:06
14. Route Params - part 1
4:12
15. Route Params - part 2
1:46
16. Route Params part 3.1 - useParams() & challenge
4:53
17. Route Params part 3.2 - useParams() challenge
7:10
18. Route Params Quiz
4:15
19. Nested Routes Intro
8:52
20. Fixing the Navbar with a Layout Route
4:52
21. Fixing the Navbar with a Layout Route part 2
7:42
22. Bootstrap the Host pages
3:57
23. Nesting the /host routes
3:45
24. Creating the Host Layout
6:27
25. Relative Paths
4:25
26. Index Routes
3:48
27. To nest or not to nest?
5:06
28. Nested Routes Quiz
4:48
29. Add Footer
3:18
30. NavLink
7:12
31. Active Link Styling with NavLink
3:52
32. Active Link Styling with NavLink - part 2
5:12
33. Adding Host Vans Routes
5:11
34. 🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages
3:18
35. Building out the Host Van Detail page
8:54
36. Relative Links
7:01
37. Back to all vans
5:13
38. Add /host/vans/:id Nested Routes
8:06
39. Add the Final Navbar!
6:33
40. Outlet Context
5:30
41. Search Params Intro
7:16
42. useSearchParams
4:03
43. Challenge: Set up search params in VanLife
4:41
44. Filter the array w/ the search param
5:04
45. Challenge: Filter the vans in VanLife
1:41
46. Using Links to add search params
2:51
47. Challenge: Filter the vans with Links
3:12
48. Using the search params setter function
3:31
49. Challenge: Filter the vans with a setter function
2:30
50. Caveats to setting params
1:30
51. Merging search params with Links
6:09
52. Merging search params with the setSearchParams function
5:19
53. Challenge: Conditional rendering practice
4:39
54. Fix remaining absolute paths
1:50
55. Back to all vans
2:12
56. Link state
6:29
57. useLocation
7:59
58. Challenge: conditionally render the back button text
2:47
59. 404 Page
5:48
60. "Happy Path" vs. "Sad Path" (new)
2:32
61. Quick update to our fetching code
2:57
62. Coding the Sad Path - Loading state (new)
3:22
63. Coding the Sad Path - Error handling
5:59
64. Update: Accessibility Addition
1:29
65. Initial Login Form
1:50
66. Note from the future: importing image assets in Vite
2:47
67. Protected Routes Intro (FDCP)
1:48
68. Protected Routes - AuthRequired Layout Route (FDCP)
3:10
69. Protected Routes - Implementing "auth" (FDCP)
2:25
70. Protected Routes - Navigate (FDCP)
5:34
71. VanLife Protected Routes (FDCP)
3:25
72. Protected Routes Quiz
1:39
73. Navigation State (FDCP)
5:22
74. Setup for authentication - happy path (FDCP)
3:31
75. Authentication setup - sad path (FDCP)
7:28
76. Navigate to /host route after login (FDCP)
2:14
77. History Stack and Replace (FDCP)
5:30
78. Challenge - send user to original page
7:33
79. Placeholders are gone! 🎉
2:10
80. Cloud Firestore Setup 🔥
6:04
81. Cloud Firestore Code Setup
4:03
82. Collection ref and getVans() function
6:50
83. Create getVan function
3:53
84. Refactor getHostVans function
3:22
85. Final loose ends
1:34
86. Outro
3:09

HomePlans & PricingTeacher talent program

Community

Explore the communityPodcastYouTubeGet Scrimba emails

Courses

All courses Self-paced BootcampFree coursesPro courses

Company

About usSupport centerTermsPrivacy

Built with Imba