CF

React Router v4

6h 44m 1s
English
Paid

React Router v4 gives you a simple and flexible way to handle routes in a React app. It uses normal React components, so your routing fits into the same mental model you use for the rest of your code. If you come from tools like Express, Angular, or Ember, this shift from static routes to dynamic routes may feel strange at first. This course helps you learn each key idea through clear examples and common real‑world cases.

You will walk through many routing patterns and build a full app as you learn. Each topic is small and focused, so you can move at your own pace and apply each idea right away.

Pre‑Requisites

You should know React and ES2015+, or you can take our React course first.

What You’ll Learn

  • How React Router v4 thinks about routing
  • URL params
  • Client‑side routing basics
  • Nested routes
  • Programmatic navigation
  • Redirects and auth flows
  • 404 pages
  • Handling ambiguous matches
  • Using Redux with Router
  • Passing props to Link
  • Sidebars and breadcrumbs
  • Route configs
  • Custom Link components
  • Blocking or shaping route changes
  • Passing props to Router components
  • Query strings
  • Recursive routes
  • Server rendering
  • Code splitting
  • Testing routes
  • Route transitions

Who This Course Is For

  • Developers new to React Router who want to learn its component‑based API
  • Developers with some routing experience who want a deeper look at how React Router works
  • Developers who want to add code splitting to their apps
  • Developers who want to work with URL params
  • Developers comparing hash history and HTML5 history
  • Developers who need nested routes
  • Developers who want to render a React app on the server
  • Developers building sidebars or breadcrumb navigation
  • Developers adding route animations
  • Developers using Redux with React Router
  • Developers who want to use Redirect or history.push for navigation

About the Author: 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.

Watch Online 50 lessons

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

Course content

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

Related courses

Frequently asked questions

What is React Router v4 about?
React Router v4 gives you a simple and flexible way to handle routes in a React app. It uses normal React components, so your routing fits into the same mental model you use for the rest of your code. If you come from tools like Express…
Who teaches React Router v4?
React Router v4 is taught by UI.dev (Tyler McGinnis). You can find more courses by this instructor on the corresponding source page.
How long is React Router v4?
React Router v4 contains 50 lessons with a total runtime of 6 hours 44 minutes. All lessons are available to watch online at your own pace.
Is React Router v4 free to watch?
React Router v4 is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch React Router v4 online?
React Router v4 is available to watch online on CourseFlix at https://courseflix.net/course/react-router-v4. The page hosts every lesson with the integrated video player; no download is required.