Skip to main content
CF

React Router v4

6h 44m 1s
English
Paid
Updated September 2026

React Router v4 is a 50-lesson 6 hours 44 minutes self-paced course by UI.dev (Tyler McGinnis). React Router v4 , from UI.

Course facts

Lessons
50
Duration
6 hours 44 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
UI.dev (Tyler McGinnis)
Price
Premium

React Router v4, from UI.dev's Tyler McGinnis, treats routing as just another set of React components — so if you already think in React, the routing model should feel familiar rather than bolted on.

Learning Through a Real App

Rather than isolated routing snippets, you build a full application as you go, working through routing patterns one focused topic at a time.

What's Covered

  • URL params, nested routes, and programmatic navigation
  • Redirects, authentication flows, and handling 404s
  • Server rendering, code splitting, and testing routes
  • Sidebars, breadcrumbs, and custom Link components

Across 50 lessons, the course is built for developers already comfortable with React and ES2015+ who want a genuinely deep look at how React Router works.

Who teaches React Router v4? UI.dev (Tyler McGinnis)

UI.dev (Tyler McGinnis) thumbnail

UI.dev (formerly tylermcginnis.com) is the online course platform of Tyler McGinnis, a US developer who has been publishing React and JavaScript educational material continuously since 2014. The platform was one of the earliest dedicated React-tutorial sources and remains widely cited for the depth of its long-form courses on JavaScript fundamentals and the React ecosystem.

Course material covers React (including modern hooks-based patterns and Next.js), modern JavaScript (the canonical Modern JavaScript course), Firebase, GraphQL, Redux, TypeScript with React, and the algorithm / data-structure interview prep track. The teaching style is unusually rigorous about the language fundamentals underneath the framework material — Tyler's Modern JavaScript course in particular is a classic of the genre.

The CourseFlix listing under this source carries over 15 UI.dev / Tyler McGinnis courses spanning that range. Material is paid; UI.dev runs on per-course or membership pricing on the original platform.

What lessons are included in React Router v4?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 50 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction and Philosophy behind React Router v4
All Course Lessons (50)
#Lesson TitleDurationAccess
1
Introduction and Philosophy behind React Router v4 Demo
22:26
2
URL Parameters with React Router v4
05:07
3
(Solution) URL Parameters
03:04
4
Nested routes with React Router v4
19:34
5
(Solution) Nested Routes
12:29
6
Pass props to a component rendered by React Router v4
04:14
7
(Solution) Passing Props
02:32
8
Programmatically navigate using React Router v4
07:04
9
(Solution) Programmatically Navigate (Declarative)
02:56
10
(Solution) Programmatically Navigate (Imperative)
01:58
11
Query Strings with React Router v4
05:54
12
(Solution) Query Strings
03:10
13
Handling 404 pages (catch all routes) with React Router v4
06:39
14
(Solution) Catch All Routes
02:42
15
Ambiguous Matches with React Router v4
05:44
16
(Solution) Ambiguous Matches
03:11
17
Pass props to React Router v4's Link component
04:19
18
(Solution) Passing Props to Link
04:19
19
Rendering a Sidebar or Breadcrumbs with React Router v4
07:05
20
(Solution) Sidebar
04:08
21
Customizing your own Link component with React Router v4
06:35
22
(Solution) Customizing Link
02:19
23
Project - Introduction and Starter Files with Create React App
04:47
24
Project - Given code for Project
05:14
25
Project - Setting up the initial routes
05:12
26
Project - Setting up a catch-all (404) route
01:47
27
Project - Setting up the Home route
04:03
28
Project - Fetching the players
14:23
29
Project - Rendering the players
07:28
30
Project - Fetching the teams
03:09
31
Project - Rendering the teams
11:23
32
Project - Setting up the teams page
15:44
33
Project - Fetching the team's articles
05:48
34
Project - Rendering the team's articles
08:06
35
Project - Creating a Loading component
05:18
36
Animated Transitions with React Router v4
22:52
37
(Solution) Animated Transitions
04:01
38
Project - Adding in Animated Transitions
04:55
39
Code Splitting with React Router v4
15:54
40
(Solution) DynamicImport
02:45
41
(Solution) React.lazy
01:41
42
Project - Code Splitting
07:06
43
Protected routes and authentication with React Router v4
18:39
44
(Solution) Protected Routes
05:09
45
Preventing transitions with React Router v4
08:47
46
(Solution) Preventing Transitions
02:51
47
Route Config with React Router v4
10:19
48
(Solution) Route Config
05:47
49
(Bonus) Server Rendering with React and React Router v4
52:40
50
(Bonus) Recursive paths with React Router v4
10:44
Unlock unlimited learning

Get instant access to all 49 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to React Router v4?

More courses by UI.dev (Tyler McGinnis)

  • React Hooks thumbnailUpdated 3y ago

    React Hooks

    If you never develop a convincing answer for both of those questions, you won t have a solid enough foundation to build upon when you dive into the specifics.
    3h 47m
  • React Fundamentals thumbnailUpdated 3y ago

    React Fundamentals

    If you're serious about learning React, there's no better place to do it. Originally launched in 2016, this course has been taken by tens of thousands of develo
    4h 36m
  • React Native thumbnailUpdated 3y ago

    React Native

    The description is simple - learn how to create an iOS and Android React Native app that you submit to both the App Store and the Google Play store. With over 7
    3h 46m
  • Redux thumbnailUpdated

    Redux

    Learn Redux from the inside out by building your own implementation first, then applying it to real React and vanilla JS applications.
    7h 13m
  • The interactive way to master modern React - react.gg (FULL COURSE) thumbnailClassic

    The interactive way to master modern React - react.gg (FULL COURSE)

    OPTIMIZED FOR AHA! We’re obsessed with helping you reach your aha! moments. Our text sections help you master the “why” behind React concepts and include fun, i
    7h 53m5/5
  • TypeScript course thumbnailUpdated 3y ago

    TypeScript course

    Types are fundamental to TypeScript, so naturally you'll need to be familiar with the base types that exist in JavaScript. We'll start the course off with some
    6h 27m

Frequently asked questions

What prerequisites are needed before taking this course?
Before enrolling in this course, students should have a solid understanding of React and ES2015+. If you're not familiar with these technologies, it's recommended to take a foundational React course first to ensure you can keep up with the material.
What projects or apps will be built during the course?
The course includes a full app project where you'll set up routes, handle dynamic URL parameters, create nested routes, implement 404 pages, and manage authentication. Additionally, you'll work on code splitting, animated transitions, and server rendering to enhance your app's performance and user experience.
Who is the target audience for this course?
This course is ideal for developers new to React Router who are looking to understand its component-based API, as well as those with some routing experience seeking deeper insights into React Router's workings. Developers wanting to incorporate code splitting into their applications will also find this course valuable.
How does this course compare to other routing courses?
The course specifically focuses on React Router v4's component-based approach to routing, offering practical examples and real-world scenarios. It covers various routing patterns, including nested routes, programmatic navigation, and route transitions, providing a comprehensive understanding of routing within React applications.
What specific tools and platforms are used in this course?
This course uses React Router v4, integrated with React for routing. You'll also work with tools like Create React App for project setup and explore Redux integration with Router. The course includes examples of client-side routing, server rendering, and code splitting using React.lazy.
What topics are not covered in this course?
While the course covers a wide range of routing topics within React Router v4, it does not delve into non-React frameworks or libraries for routing, such as Angular or Express. The focus remains on client-side routing with React, excluding backend routing or server-side frameworks.
What is the expected time commitment for completing the course?
The course consists of 50 lessons, allowing you to progress at your own pace. Each lesson is designed to be small and focused, enabling you to absorb the material and apply it directly to your projects. The total runtime is flexible, and you can adjust your schedule based on your learning speed and availability.