Learn React Router v6, the most popular routing library for React applications and one of the most downloaded React support libraries ever.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
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
useLocation
useLoaderData
useActionData
Protected Routes
Deploying with Netlify
Using Firebase for data storage
01. Introduction to React Router
- 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
- 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
02. Nested Routes
- 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!
03. Search Params and Links
- 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
04. Loaders and Errors
- 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
05. Actions and Protected Routes
- 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
06. Deferred Data
- 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
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
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
useLocation
useLoaderData
useActionData
Protected Routes
Deploying with Netlify
Using Firebase for data storage
COURSE OUTLINE
01. Introduction to React Router
- 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
- 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
02. Nested Routes
- 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!
03. Search Params and Links
- 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
04. Loaders and Errors
- 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
05. Actions and Protected Routes
- 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
06. Deferred Data
- 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
