Learn React Router 6 by Scrimba
Learn React Router v6, the most popular routing library for React applications and one of the most downloaded React support libraries ever.
Course Highlights
- Single and multi-page applications
- Basic router setup
- Routes in React Router
- Links in React Router
- Route parameters
- Nested routes
- Outlet in React Router
- Using NavLink
- Protected routes
- Relative paths
- Index Routes
- Loaders in React Router
- Handling errors
- Forms in React
- useNavigate()
Skills you will learn!
Curriculum
20 Topics
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
A11y Update - wrapping complex content in a link
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
23 Topics
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!
24 Topics
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
Update: Accessibility Addition
12 Topics
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
40 Topics
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
18 Topics
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
1 Topic
Certificate of Completion
Learn React Router 6
Related React JS Courses
Thank You!
Your review has been submitted successfully.