There’s an easier way to master React Router. Our linear course is like having a smart, experienced friend sit down next to you, walk you through each concept, and apply what you learn. It’s our secret sauce.
REACT ROUTER (v6)
3h 15m 27s
English
Paid
About the Author: UI.dev (Tyler McGinnis)
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 41 lessons
0:00
/ #1: The Fundamentals
All Course Lessons (41)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | The Fundamentals Demo | 07:21 | |
| 2 | (Solution) The Fundamentals | 02:48 | |
| 3 | (Project) Introduction | 04:39 | |
| 4 | (Project) Initial Routes | 05:07 | |
| 5 | URL Parameters | 09:34 | |
| 6 | (Solution) URL Parameters | 02:28 | |
| 7 | (Project) Home | 05:52 | |
| 8 | Query Strings | 04:31 | |
| 9 | (Solution) Query Strings | 02:45 | |
| 10 | (Project) Team Page | 14:20 | |
| 11 | Customizing React Router's Link Component | 03:33 | |
| 12 | (Solution) Customizing Link | 01:34 | |
| 13 | (Project) Players | 11:11 | |
| 14 | Nested Routes | 05:19 | |
| 15 | (Solution) Nested Routes | 03:24 | |
| 16 | (Solution) Nested Routes - Outlet | 04:10 | |
| 17 | Project - Player | 08:21 | |
| 18 | (Project) Team | 09:04 | |
| 19 | (Project) Articles | 08:56 | |
| 20 | (Project) Loading | 13:20 | |
| 21 | Programmatically Navigate | 04:03 | |
| 22 | (Solution) Programmatically Navigate (Declarative) | 02:39 | |
| 23 | (Solution) Programmatically Navigate (Imperative) | 01:50 | |
| 24 | (Project) Navigate | 05:59 | |
| 25 | Code Splitting | 05:34 | |
| 26 | (Solution) React.lazy | 01:30 | |
| 27 | (Project) Code Splitting | 01:54 | |
| 28 | Route Configs | 04:20 | |
| 29 | (Solution) Route Config | 02:33 | |
| 30 | (Project) Config | 05:59 | |
| 31 | Protected Routes | 07:53 | |
| 32 | (Solution) Protected Routes | 03:46 | |
| 33 | Handling 404 Pages | 01:02 | |
| 34 | (Solution) Catch All Routes | 02:21 | |
| 35 | Passing Props to Link | 02:34 | |
| 36 | (Solution) Passing Props to Link | 01:32 | |
| 37 | Sidebars | 03:29 | |
| 38 | (Solution) Sidebar | 02:57 | |
| 39 | Passing Props to React Router Components | 01:17 | |
| 40 | Recursive Paths | 03:30 | |
| 41 | Outro + Next Steps | 00:28 |
Unlock unlimited learning
Get instant access to all 40 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 2y agoScale React Development with Nx
By: egghead.ioOn the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code. But there's a bit more to1h 34m -
Updated 2y agoFull Stack Spring Boot & React
By: Nelson Djalo (Amigoscode)Netflix recently switched their entire backend to Spring Boot 2. It was a no brainer really. Spring Boot 2 is the best framework to build applications. Weather10h 1m5/5 -
Updated 2y agoMy first Remix app
By: Build UIRemix is a modern full-stack React framework built on the foundations of the web platform. It layers the latest innovations in the frontend ecosystem on top of5h5/5
Frequently asked questions
What are the prerequisites for enrolling in this course?
Before starting this course, students should have a basic understanding of React. Familiarity with JavaScript, especially ES6 syntax, is also recommended. The course builds upon these foundations to teach React Router effectively.
What kind of projects will I build during the course?
Students will work on various projects including building initial routes, creating a home page, developing a team page, and working on a player module. There are also projects focused on code splitting, handling loading states, and configuring routes. These projects provide practical experience with React Router.
Who is the target audience for this course?
This course is designed for developers who already have a foundational understanding of React and want to learn how to implement routing in their applications using React Router. It is ideal for those who are looking to enhance their React skills with routing capabilities.
How does the depth of this course compare to other React Router courses?
This course offers a structured and linear approach to mastering React Router, covering fundamental concepts like URL parameters, nested routes, and code splitting. It provides both theoretical lessons and practical projects, making it suitable for learners who prefer a hands-on approach to learning.
What specific tools or platforms will I learn about in the course?
The course focuses specifically on React Router v6. Students will learn about customizing the Link component, programmatically navigating within apps, and handling protected routes, among other topics. It also covers using React.lazy for code splitting.
What topics are not covered in this course?
The course does not cover the basics of React itself, as it assumes prior knowledge of React. It also does not delve into other routing libraries or broader JavaScript frameworks beyond React Router.
How much time should I expect to commit to this course?
The course consists of 41 lessons. While the total runtime is not specified, students should plan to dedicate time for both video lessons and hands-on project work. The pace may vary based on individual learning speeds and prior experience with React.