React Router 6 – Full Course
By freeCodeCamp.org
Published: Apr 24, 2023
“
This course will teach you to build real-world apps with React Router 6. Click here to get to the interactive version 👉 https://scrimba.com/links/react-router-6-course
Throughout the course, you’ll be building an app called “VanLife” – an Airbnb-style web app dedicated to renting out travel vans for your next big road trip!
As you build “VanLife”, you will learn all the important parts of React Router, such as layout and index routes, nested routes, filtering results with search parameters, protecting routes for authenticated users, and more. You will also learn about the new Remix-inspired data router APIs, including Loaders and Actions.
This course was created by Bob Ziroll, Scrimba’s Head of Education.
🔗 Follow Bob on Twitter here: https://twitter.com/bobziroll
🔗 Follow Scrimba on YouTube: https://www.youtube.com/c/Scrimba
âï¸ Get the code âï¸
🔗 Via the Scrimba course: https://scrimba.com/links/react-router-6-course
🔗 Via the GitHub repo: https://scrimba.com/links/react-router-course-github-repo
âï¸ Prerequisites âï¸
Before taking this course, you should already be well versed in HTML, CSS, JavaScript, and React.
💫 Links mentioned in course:**
🔗 Scrimba’s Learn React Course – https://scrimba.com/learn/learnreact
🔗 VanLife Figma Design – https://scrimba.com/links/figma-vanlife
🔗 Firebase – https://scrimba.com/links/firebase-homepage
🔗 Firestore Docs, get all docs in collection – https://scrimba.com/links/firestore-docs-get-all-docs-in-collectionfirestore-docs-get-all-docs-in-collection)
🔗 Netlify – https://scrimba.com/links/netlify-home-page
🔗 GitHub Desktop – https://desktop.github.com/
🔗 Mirage JS – https://miragejs.com/
🔗 Bob Ziroll’s GitHub – https://twitter.com/bobziroll
Introduction to React Router 6
Multi-page vs single-page apps
React Router Setup & BrowserRouter
Extra: Local Development
Routes
BrowserRouter & Routes challenge
Route, path, & element
Quick Re-org
Link
VanLife project bootstrapping
Initial Deploy to Netlify
Mirage JS Server
Challenge: Vans Page
Route Params
Nested Routes Intro
Fixing the Navbar with a Layout Route
Bootstrap the Host pages
Nesting the /host routes
Creating the Host Layout
Relative Paths
Index Routes
To nest or not to nest?
Add Footer
NavLink
Active Link Styling with NavLink
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!
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” “Sad Path”
Quick update to our fetching code
Coding the Sad Path – Loading state
Coding the Sad Path – Error handling
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
Initial Login Form
Note from the future: importing image assets in Vite
Protected Routes
Parallel Loaders demo
Challenge: Protected Routes w/ loaders
Challenge: Protected Routes – pt 1
Aside challenge: move remaining fetching to loaders
Challenge: Protected Routes – pt 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 – pt 1
redirectTo – pt 2
redirectTo in VanLife
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
”
(advertising @MSI) https://cinecom.info/join – We made a new short movie about the Apollo moonlanding in Virtual Production using Unreal Engine 5. Check out the behind the scenes!
