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

Learn React Router 6

Enroll for freeGet started!

Join 15618 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses and career paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
Subscribe now!
The course creator Bob Ziroll

with Bob Ziroll

Course level: Intermediate

Learn React Router v6, the most popular routing library for React applications and one of the most downloaded React support libraries ever.

What's inside

This course contains 137 interactive scrims spread across 6 modules.

two girls
Introduction to React Router

20 lessons1 hour 27 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. A11y Update - wrapping complex content in a link
5:48
17. Route Params part 3.1 - useParams() & challenge
4:53
18. Route Params part 3.2 - useParams() challenge
7:10
19. Route Params Quiz
4:15
20. Get detailed reviews of your React projects – Scrimba Bootcamp
1:53
Nested Routes

23 lessons2 hours 6 min

1. Nested Routes Intro
8:52
2. Fixing the Navbar with a Layout Route
4:52
3. Fixing the Navbar with a Layout Route part 2
7:42
4. Bootstrap the Host pages
3:57
5. Nesting the /host routes
3:45
6. Creating the Host Layout
6:27
7. Relative Paths
4:25
8. Index Routes
3:48
9. To nest or not to nest?
5:06
10. Nested Routes Quiz
4:48
11. Add Footer
3:18
12. NavLink
7:12
13. Active Link Styling with NavLink
3:52
14. Active Link Styling with NavLink - part 2
5:12
15. Adding Host Vans Routes
5:11
16. 🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages
3:18
17. Building out the Host Van Detail page
8:54
18. Relative Links
7:01
19. Back to all vans
5:13
20. Add /host/vans/:id Nested Routes
8:06
21. Add the Final Navbar!
6:33
22. Outlet Context
5:30
23. Update deployed version on Netlify!
3:15
Search Params and Links

24 lessons1 hour 35 min

1. Search Params Intro
7:16
2. useSearchParams
4:03
3. Challenge: Set up search params in VanLife
4:41
4. Filter the array w/ the search param
5:04
5. Challenge: Filter the vans in VanLife
1:41
6. Using Links to add search params
2:51
7. Challenge: Filter the vans with Links
3:12
8. Using the search params setter function
3:31
9. Challenge: Filter the vans with a setter function
2:30
10. Caveats to setting params
1:30
11. Merging search params with Links
6:09
12. Merging search params with the setSearchParams function
5:19
13. Challenge: Conditional rendering practice
4:39
14. Fix remaining absolute paths
1:50
15. Back to all vans
2:12
16. Link state
6:29
17. useLocation
7:59
18. Challenge: conditionally render the back button text
2:47
19. 404 Page
5:48
20. "Happy Path" vs. "Sad Path"
2:36
21. Quick update to our fetching code
2:57
22. Coding the Sad Path - Loading state
3:34
23. Coding the Sad Path - Error handling
4:54
24. Update: Accessibility Addition (React Router Standalone)
1:29
Loaders and Errors

12 lessons 40 min

1. Loaders intro
4:22
2. createBrowserRouter
6:06
3. Setting up the data router
2:44
4. Loader function
2:47
5. Challenge: Vans List Loader
1:24
6. useLoaderData
2:04
7. Challenge: useLoaderData in Vans List page
2:25
8. Use the loader data instead of the useEffect
3:55
9. Loaders Quiz
3:12
10. Handling errors
2:40
11. Add errorElement to vans route
2:47
12. useRouteError
6:22
Actions and Protected Routes

40 lessons2 hours 39 min

1. Initial Login Form
2:22
2. Note from the future: importing image assets in Vite
2:47
3. Protected Routes Intro
5:32
4. Protected Routes - AuthRequired Layout Route
3:37
5. Protected Routes - Conditionally send to /login page
4:03
6. Protected Routes Quiz
1:39
7. Protected Routes - with loaders
4:35
8. Protected Routes w/ loaders
4:20
9. Parallel Loaders demo
3:31
10. Challenge: Protected Routes w/ loaders
1:14
11. Challenge: Protected Routes in VanLife - Part 1
2:06
12. Aside challenge: move remaining fetching to loaders - Part 1
5:33
13. Aside challenge: move remaining fetching to loaders - Part 2
4:27
14. Challenge: Protected Routes in VanLife - Part 2
8:11
15. Send login message prompt to login page
3:01
16. Consume message from search param on login page
7:37
17. Pass message to Login page
3:46
18. 🌶️ Take: Forms in React are bad
2:29
19. Setting up for authentication - happy path
4:50
20. Setting up for authentication - sad path
8:01
21. useNavigate()
3:44
22. React Router Form Component
2:54
23. Setting up the Action function
4:28
24. Add form and action to VanLife
2:14
25. Action function - params
1:37
26. Action function - request
3:24
27. Get form data in VanLife
1:40
28. Use data in action to log in
2:32
29. Better (but still fake) auth
3:41
30. Challenge: send user to /host route after log in
3:23
31. Form replace
5:12
32. useActionData
4:24
33. Action error handling
3:05
34. Action error handling in VanLife
2:58
35. useNavigation()
4:05
36. useNavigation in VanLife
3:56
37. get previous route pathname
6:55
38. redirectTo - part 1
4:21
39. redirectTo - part 2
6:18
40. redirectTo in VanLife
4:43
Deferred Data

18 lessons1 hour 13 min

1. Deferring data
2:55
2. Promises and defer()
5:40
3. defer getVans()
1:42
4. Await component
6:47
5. Await in Vans route
5:17
6. Await vans refactor
2:10
7. React Suspense
4:56
8. Suspense in VanLife
3:20
9. Putting it all together - defer, Await, Suspense in HostVans
4:37
10. errorElements in remaining van loading pages
3:21
11. Placeholders are gone! 🎉
1:58
12. Cloud Firestore Setup 🔥
6:06
13. Cloud Firestore Code Setup
3:16
14. Collection reference and getVans() function
7:26
15. Create getVan() function
4:45
16. Refactor getHostVans function
3:44
17. Final loose ends
2:08
18. Outro
2:59

You'll learn

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

useNavigation

useLocation

useLoaderData

useActionData

Protected Routes

Deploying with Netlify

Using Firebase for data storage

You'll build

screenshot
VanLife

An awesome app for renting decked-out travel vans for your next road trip adventure! 🚐

man

Prerequisites

Before taking this course, you should have a basic understanding of JavaScript and React. Below are our suggested resource to get you up to speed.

Learn JavaScript
209 lessons | 10 hours 26 min
with Per Harald Borgen
Per Harald BorgenBeginnerLearn React
177 lessons | 13 hours 46 min
with Bob Ziroll
Bob ZirollIntermediate

Meet your teacher

The course creator

Bob Ziroll

Head of Education at Scrimba. Passionate about learning 📚, helping others achieve their career goals 👩‍💻, tennis 🎾, woodworking 🪑, and my family 👨‍👩‍👦‍👦.

Follow me on twitter

Why this course rocks

In this 121-part course, you’ll learn the ins and outs of React Router v6, the most popular routing library for React applications and one of the most downloaded React support libraries ever.

React Router is the primary way most applications handle client-side routing, which allows React developers to create “single-page” web apps. Unlike the name might seem to imply, a “single-page” app is one that has many different web pages that are all handled by the React app directly on the client, without necessarily needing to make extra requests of the server every time the user navigates to a new page.

Instead of loading new pages for each route, a Single-Page App (SPA) updates the document that has already loaded in the browser to display the new information. This leads to an extremely snappy-feeling website that doesn’t have the tell-tale flicker of a site that loads a new HTML page on every route transition.

In this course, you’ll learn the most important parts of the React Router (v6) library while building an app called “VanLife”, an app for renting decked-out travel vans for your next road trip adventure.

This course is filled with interactive coding challenges, small and large, to help drill in the topics you’ll be learning, all while building the main VanLife project. Repetition and practice is the real way to avoid tutorial hell and build the muscle memory needed to truly understand what you’re learning.

So if you’re looking to escape tutorial hell, this course (and Scrimba courses in general) is the way to go!

Don’t forget: learning should never be lonely - that’s why we’ve set up the Scrimba Discord server. Make sure you drop in, say hello, and share your goals and achievements. If you get stuck, there is even a dedicated React help channel.

F to the A oracle to the Q
What even is React Router?

React Router is the most popular 3rd-party (I.e. not developed by the React core team) library for handling client-side routing. At its core, it’s a library built for conditionally rendering certain “pages” depending on the current URL route of the app. (E.g. example.com/about, example.com/contact-us, example.com/products/123, etc.)

Who uses React Router?

With over 10 million downloads per week, it’s safe to say React Router is used by most React applications that need to handle client-side routing. There are alternatives out there (most notably TanStack Router), but none of them are as ubiquitous as React Router at this time.

Who created React Router?

The React Router library was created and is maintained as open source software, primarily by Ryan Florence and Michael Jackson, prominent contributors and figures in the JavaScript community. Those same developers are the creators of a framework called Remix, which was recently purchased by Shopify. React Router plays a large role in the Remix framework, and has thus moved under the umbrella of code by Remix.

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