React Router 6 – Full 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.

⭐️ Get the code ⭐️

💫 Links mentioned in course:

0:00 1: Introduction to React Router 6
4:56 2: Multi-page vs single-page apps
10:12 Extra: Local Development & GitHub Repo
12:25 3: React Router Setup & BrowserRouter
15:40 4: Routes
18:23 5: BrowserRouter & Routes Challenge
19:32 6: Route, Path, & Element
23:48 7: Quick Re-org
24:53 8: Link
28:55 9: VanLife project bootstrapping
37:01 10: Initial Deploy to Netlify
48:47 11: Mirage JS Server
50:41 12: Challenge: Vans Page - Part 1
1:02:09 14: Route Params
1:25:09 19: Nested Routes Intro
1:34:04 20: Fixing the Navbar with a Layout Route
1:46:45 22: Bootstrap the Host pages
1:50:45 23: Nesting the /host routes
1:54:34 24: Creating the Host Layout
2:01:04 25: Relative Paths
2:05:32 26: Index Routes
2:09:24 27: To nest or not to nest?
2:14:34 28: Nested Routes Quiz
2:19:26 29: Add Footer
2:22:47 30: NavLink
2:30:03 31: Active Link Styling with NavLink
2:39:14 33: Adding Host Vans Routes
2:44:28 34: Optimal Side Quest
2:47:49 35: Building the Host Van Detail page
2:56:47 36: Relative Links
3:03:51 37: Back to all vans
3:09:08 38: Add /host/vans/:id Nested Routes
3:17:17 39: Add the Final Navbar
3:23:53 40: Outlet Context
3:29:27 41: Update deployed version on Netlify
3:32:45 42: Search Params Intro
3:40:04 43: useSearchParams
3:48:55 45: Filter the array w/ the search param
3:55:47 47: Using Links to add search params
4:01:57 49: Using the search params setter function
4:08:05 51: Caveats to setting params
4:09:38 52: Merging search params
4:21:13 54: Challenge: Conditional rendering practice
4:25:56 55: Fix remaining absolute paths
4:27:50 56: Back to all vans
4:30:05 57: Link state
4:36:37 58: useLocation
4:47:31 60: 404 Page
4:53:22 61: Happy Path vs Sad Path
4:56:01 62: Update to our fetching code
4:59:02 63: Coding the Sad Path
5:07:37 65: Loaders intro
5:12:03 66: createBrowserRouter
5:18:13 67: Setting up the data router
5:21:00 68: Loader function
5:25:17 70: useLoaderData
5:29:52 72: Use the loader data instead of the useEffect
5:33:51 73: Loaders Quiz
5:37:06 74: Handling errors
5:39:49 75: Add errorElement to vans route
5:42:40 76: useRouteError
5:49:06 77: Initial Login Form
5:51:31 78: Importing image assets in Vite
5:54:22 79: Protected Routes
6:18:28 85: Parallel Loaders Demo
6:22:02 86: Challenge - Protected Routes
6:43:51 91: Send login message prompt to login page
6:46:56 92: Consume message
6:54:37 93: Pass message to Login page
6:58:26 94: Hot Take: Forms in React are bad
7:00:58 95: Setting up for auth
7:13:57 97: useNavigate()
7:17:44 98: React Router Form Component
7:20:41 99: Setting up the action function
7:25:13 100: Add form and action to VanLife
7:27:31 101: Action function
7:32:39 103: Get form data in VanLife
7:34:22 104: Use data in action to log in
7:36:57 105: Better (but still fake) auth
7:44:08 107: Form replace
7:49:23 108: useActionData
7:53:50 109: Action error handling
8:00:00 111: useNavigation()
8:08:07 113: Get previous route pathname
8:15:05 114: redirectTo
8:30:37 117: Deferring data
8:33:35 118: Promises and defer()
8:39:19 119: defer getVans()
8:41:04 120: Await component
8:55:28 123: React Suspense
9:00:27 124: Suspense in VanLife
9:03:51 125: Putting it all together - Defer, Await, Suspense in HostVans
9:08:31 126: errorElements in remaining van loading pages
9:11:55 127: Placeholders are gone!
9:13:57 128: Cloud Firestore
9:23:25 130: Collection reference and getVans() function
9:30:54 131: Create getVan() function
9:35:42 132: Refactor getHostVans function
9:39:29 133: Final loose ends

[Mr_Brian]

Bob Ziroll is just one of the best instructors for React. I did his 12 hour course of React for beginners and I loved it.

[siddhantjain]

Best course I have ever taken. The small challenges and the fact that he neither wasted time on CSS nor on making components and taught us Routing was so Fun. Also, he has given access to Figma file, so we can work on CSS skills later. More courses like these.

[njiahtata]

Bob Ziroll you are an excellent teacher. This is absolute freedom from tutorial hell.

[selahadinjemal]

Bob Ziroll is the best React instructor that I have come across so far. His teaching styles are unmatched. unlike many other tutorials on youtube that you just follow along, he's tutorial is highly interactive and makes you do much of the work. I took his learn react course in Scrimba, I can proudly say that It is the best react course for beginners. Can't wait to work on this one!. Also shoutout to freecodecamp for finding such individuals and convincing them on offering their services for free.

[jeyfason]

Bob Ziroll is my favorite instructor whenever i see any course prepared by him i feel like i'm in good hand for getting better knowledge. thanks Bob Ziroll for your react beginner course was real helped me

[sahaneakanayaka]

The pitch of his voice has already told me that you are going to master react-router... Love you Bob....😍🙏

[TheFuneralmask]

For anyone stuck around 6:40:00 requireAuth this fixed it for me:

export async function requireAuth() {
const isLoggedIn = false

if (!isLoggedIn) {
const response = redirect("/login")
response.body = true
throw response
}
return null
}

[wenatairs]

Yes, this is what was needed after React Router was updated to this new version. Thanks FCC and thanks Bob for this amazing course. Now, time to dive in

[lisalee]

I found the best course taught by the best instructor!!! Thank you so much Bob I love your class so much!! Thank you for helping me learning!!

[GeorgeAbutiate]

The Advanced course was on point and i love the way he break everything down to the pieces. It serves as my personal guide in case i get stuck on the field

[thehelldesk]

This course is usefull for everyone not just the beginners. Since the React Router Dom team is a bunch of trolls who never update their documentation and examples, it's a mess and a waste of time to figure out how to do a proper authentification routing. Ofc this video doesn't cover every cases as you "cheat" using createRoutesFromElement (yes i tried with a pure createBrowserRouter cause i want the object approach and it's painfull) but it's way better than the lack of official documentation. Thank you.

[Ihanmdp]

Bob Ziroll is the god of react thanks man

[prathameshlakhpati]

The way he breaks down the whole topic is just fantastic. Appreciate

[tusharghildiyal]

Damn never imagined a freaking 9 hours course on JUST React Router 😮
Kudos to FCC 🔥

[jacktorres]

Very awesome course! Loved the instructor and loved how Scrimba works, though I still mostly ran the project locally to get familiar with the dev workflow and to save my code edits for each section separately. I learned an incredible amount of info from this, thank you FCC and Bob!

[Sara-rgwq]

this is literally the best course ever i could not thank u guys enough + im really grateful for all the the hard work that u r putting in these courses

[itspawanpoudel]

I already know react router v6, but I am just here to hear bob ziroll voice. His voice is just perfect

[jaymahakaal]

Pranaam guruji🙇 2 month ago i completed your 12 hour react course it helped me alot to developed my practical skills of react same goes for routerV6. Please do the same with Redux i'm seriously facing alot issues to master the ReduxToolkit.

[atsgames]

ek number ka coursh hai abhi lagata hai ki ha kisi bhi tarah ka routing kar sakta hu mere tarf se 1000 topo ki salami

[Neil_]

Bob ziroll is such a wonderful instructor he made me fall in love with react. Hope he can do a course on react query. He's competent and simplifies things down to to the grain.