💲 Black Friday Special

Get an extra 35% OFF everything with coupon code BLACK_FRIDAY

0 days
00 hours
00 mins
00 secs

React Router (v6) React-router Icon

37 lessons

5 hours

Star Icon Star Icon Star Icon Star Icon Star Icon

5/5 (1242 ratings)

React Router (v6)

Star Icon Star Icon Star Icon Star Icon Star Icon

5/5 (1242 reviews)

Todd Motto

with Todd Motto

Take complex React routing to the next level with this whirlwind tour of the API and build a real project. Learn component-based routing best practices, authentication scenarios, hidden gems and champion your next React app.

6

Chapters

37

Lessons

5

Hours
Closed Captions Icon

Closed Captions in English

Free Lesson Arrow Icon
Course Thumbnail
Play Icon

Syncing Search Param State with UI State 10:53

Star Icon Star Icon Star Icon Star Icon Star Icon
By far the best React introductory course out there, just brilliant. I've attempted many others before, but none were up-to-date and comprehensive like this.
Onome Adamu

Onome Adamu

Software Engineer
Star Icon Star Icon Star Icon Star Icon Star Icon
Loved React Basics. The content is amazing, I learnt so much on this course, can't wait to go over the next React courses!
Victor Hazbun

Victor Hazbun

CEO
Star Icon Star Icon Star Icon Star Icon Star Icon
Fantastic courses explained incredibly well. Very easy to follow and understand concepts. 10/10.
Nicolas Telfer

Nicolas Telfer

Co-founder / Engineer
Star Icon Star Icon Star Icon Star Icon Star Icon
Crystal clearly explained concepts, meticulously designed examples and projects! Fantastically valuable courses overall!
Yiling Lu

Yiling Lu

Senior Developer
Star Icon Star Icon Star Icon Star Icon Star Icon
I attempted other courses before these, and Ultimate Courses is way ahead and incomparable. Clearest explanations, easy to understand, beyond basics, fantastic value for money.
Fabrizio Masini

Fabrizio Masini

JavaScript Developer
Star Icon Star Icon Star Icon Star Icon Star Icon
Absolutely fantastic courses. Self-paced, comprehensive, real examples from beginning to end, clear and concisely brilliant.
Jacob Cheriathundam

Jacob Cheriathundam

Development Architect

Here's what's inside...

Everything you need, structured and ready to go.

Introduction

3 lessons

  • Play Icon The Missing Introduction to React Router

    10:26

  • File Icon Setup Instructions

    Readme

  • Play Icon Project Setup and Walkthrough

    08:48

Core Essentials

5 lessons

  • Play Icon Introducing the <BrowserRouter />

    04:29

  • Play Icon <Route /> and Path declarations

    04:58

  • Play Icon Switching <Route /> elements with <Routes />

    10:35

  • Play Icon Handling 404 Not Found routes

    03:50

  • Play Icon Redirecting 404 Not Found routes

    03:43

Declarative Navigation and Links

3 lessons

  • Play Icon Navigating to routes with <Link />

    05:38

  • Play Icon Active link states with <NavLink />

    05:35

  • Play Icon Active styles on <NavLink />

    03:23

Advanced Routing Practices

12 lessons

  • Play Icon Nested Routes and <Outlet />

    07:25

  • Play Icon Fetching Data in Nested Routes

    10:26

  • Play Icon Relative and Absolute Navigation with <Link />

    13:38

  • Play Icon Creating Dynamic Routes

    05:27

  • Play Icon Reading Route Params with useParams() Hook

    05:06

  • Play Icon Fetching Dynamic Data with Route Params

    13:56

  • Play Icon Programmatic Navigation with useNavigate()

    04:33

  • Play Icon Replacing Router State on Navigation

    02:55

  • Play Icon Passing State on Navigation alongside useLocation()

    05:45

  • Play Icon Understanding Navigation Deltas with useNavigate()

    04:18

  • Play Icon Domain-Driven Nested Routes

    07:32

  • Play Icon Restricting Access with a <ProtectedRoute /> Component

    08:28

CRUD Operations and Bonus Techniques

13 lessons

  • Play Icon Re-investigating Relative <Link /> Paths

    04:52

  • Play Icon Using <Link /> with Nested Routes

    06:51

  • Play Icon Creating a new Product from a Form

    18:20

  • Play Icon Redirecting upon Product Create

    06:40

  • Play Icon Retrieving an existing Product

    04:32

  • Play Icon Updating an existing Product

    04:28

  • Play Icon Deleting an existing Product

    04:12

  • Play Icon Passing Props to Routed Components

    05:53

  • Play Icon Reading Search Params with useSearchParams()

    06:27

  • Play Icon Syncing Search Param State with UI State

    10:52

  • Play Icon Rendering UI from Search Param State

    10:23

  • Play Icon Scrolling to Top after Route Transitions

    05:13

  • Play Icon Object-based Route Config with useRoutes()

    10:34

Performance Techniques

2 lessons

  • Play Icon Code Splitting and Lazy-Loading Components

    10:07

  • Play Icon Creating a Suspense-ready Lazy-Load Component

    11:20

Get the complete package...

Everything you need to start mastering React today

Google Developer Experts Icon

Expert knowledge

Built by Google Developer Experts, there's no better place to learn.

Trophy Icon

All the best practices

Design patterns, battle-tested techniques, architecture and performance.

Stream Icon

Stream or download

Learn at home at your own pace, download for offline viewing.

Code Terminal Icon

Level up your career

Nail that interview or promotion with skills that will set you apart.

StackBlitz Icon

StackBlitz Embeds

Access full source code, and experiment live in the browser.

Slack Icon

Private Slack Group

Exclusive access to our members-only community (7,000+ members).

React Router (v6)

129

/user

199

Save 35%

$

ADD TO CART
MasterCard Icon PayPal Icon VISA Icon Amex Icon

EU customers: price excludes VAT

React Kickstart Bundle

199

/user

258

Save 23%

$

ADD TO CART
MasterCard Icon PayPal Icon VISA Icon Amex Icon

EU customers: price excludes VAT

Moneyback Icon

30-day money back guarantee

If you're disappointed for whatever reason, you'll get a full refund (but I'm sure you won't need it).

Discount Icon

Location discounts and students

Not-so-good exchange rate? (i.e. India/Brazil). Student?
Email us for a coupon for your country or student ID.