React Router v4

  • 34 Lessons
  • 366 Minutes
  • Updated 21 days ago
For good reason, React Router is the most popular 3rd party library in the React ecosystem. If you're using React, odds are you're also using React Router. React Router v4 introduced a new dynamic, component based approach to routing. If you're used to static routing (like in Express, Angular, or Ember), this new paradigm might be difficult to grasp. The goal of this course is to tackle every scenario you might encounter when building an app with React Router so that when the time comes, you're ready. With over six hours of video, 18 different routing scenarios, and an entire real world project you'll build, we can confidently say this course is the most comprehensive and effective way to learn React Router.

Pre-Requisites

A fundamental understanding of React.
Sign Up

What you'll learn

  • Philosophy of React Router v4

  • URL Parameters

  • Client side routing

  • Nested Routes

  • Programatically navigating

  • Redirects (Authentication)

  • 404 Pages

  • Ambiguous Matches

  • Redux Integration

  • Passing props to Link

  • Sidebars

  • Breadcrumbs

  • Route Configs

  • Custom Link components

  • Preventing transitions

  • Passing props to Router components

  • Query Strings

  • Recursive Paths

  • Server Rendering

  • Code Splitting

  • Testing

  • Animated Transitions

Who is this course for?

  • Newcomers to React Router who want to better understand how to utilize React Router's component based API
  • Experienced developers who want to better understand React Router's abstraction
  • Advanced developers who are looking how to code split their React and React Router apps
  • Developers wanting to leverage URL parameters with React Router
  • Developers wanting to understand the differences between different client side routing techniques like hash history and HTML5 history
  • Developers looking to learn how to set up nested routes with React Router
  • Advanced developers wanting to learn about server rendering a React app with React Router
  • Developers looking to create sidebar or breadcrumb navigation with React Router
  • Developers wanting to add animated transitions to their routes
  • Developers looking how to integrate Redux with React Router
  • Developers wanting to how to programatically navigate with React Router and the different use cases of Redirect and history.push
Sign Up

Course Outline

  • Introduction

    Introduction
    What to expect
  • Introduction and Philosophy behind React Router

    Video
    Text
  • URL Parameters with React Router

    Video
    Text
  • Nested Routes with React Router

    Video
    Text
  • Passing props to a component rendered by React Router

    Video
    Text
  • Programatically navigate with React Router

    Video
    Text
  • Query Strings with React Router

    Video
    Text
  • Handling 404 pages with React Router

    Video
    Text
  • Ambiguous Matches with React Router

    Video
    Text
  • Pass props to React Router's Link component

    Video
    Text
  • Rendering a Sidebar or Breadcrumbs with React Router

    Video
    Text
  • Customizing your own Link component

    Video
    Text
  • Project - Starter Files with Create React App

    Video
  • Project - Given code for Project

    Video
  • Project - Setting up the initial routes

    Video
  • Project - Setting up a catch-all (404) route

    Video
  • Project - Setting up the Home route

    Video
  • Project - Fetching the players

    Video
  • Project - Rendering the players

    Video
  • Project - Fetching the teams

    Video
  • Project - Rendering the teams

    Video
  • Project - Setting up the teams page

    Video
  • Project - Fetching the team's articles

    Video
  • Project - Rendering the team's articles

    Video
  • Project - Creating a Loading component

    Video
  • Animated Transitions with React Router

    Video
    Text
  • Project - Adding in Animated Transitions

    Video
  • Code Splitting with React Router

    Video
    Text
  • Project - Code Splitting

    Video
  • Protected routes and authentication/authorization with React Router

    Video
    Text
  • Preventing transitions with React Router

    Video
    Text
  • Recursive paths with React Router

    Video
    Text
  • Route Config with React Router

    Video
    Text
  • Server Rendering with React Router

    Video
    Text
  • Fixing 'cannot GET *url*' error in React Router

    Video
    Text

TylerMcGinnis.com - The best courses I've ever seen.

Taras Protchenko
Sign Up

The Socials

The Newsletter