React Router v5

The ability to take what you learn and apply it towards a production codebase.

Introduction, Philosophy, and Tips

You'll start the course off by looking at some housekeeping items like what you'll learn and what to expect.

Nested Routes

Nested Routes with React Router v5

(Quiz) Nested Routes

(Practice) Nested Routes

(Solution) Nested Routes

In this section you'll learn how to utilize nested routes with React Router v5.

Query Strings

Query Strings with React Router v5

(Quiz) Query Strings

(Practice) Query Strings

(Solution) Query Strings

In this section we'll break down how to implement and parse query strings with React Router v5.

Passing Props to Link

Pass props to React Router v5's Link component

(Quiz) Passing Props to Link

(Practice) Passing Props to Link

(Solution) Passing Props to Link

In this section you'll learn how ot pass props to React Router v5's Link component.

(Project) Hash History Basketball League

Introduction and starter files with Create React App

Starter Code

Initial Routes

Catch-all (404) route

Home Route

Sidebar Component

Player's Route

Team's Route

Team Page

Articles Route

Loading Component

Animating Players

Code splitting

Now that you know everything there is to know about React Router v5, now is the time to take that knowledge and apply it towards a real-world React application.

Protected Routes

Protected Routes and Authentication with React Router v5

(Quiz) Protected Routes

(Practice) Protected Routes

(Solution) Protected Routes

In this section, you'll learn how to create authenticated routes (routes that only certain users can access based on their authentication status) using React Router v5.

Bonus

Server Rendering with React and React Router v5

Fixing the 'cannot GET *url*' error in React Router

Recursive Paths with React Router v5

Here's some bonus content that doesn't fit into the normal flow of the course.

Why React Router v5?

Introduction and Philosophy behind React Router v5

(Quiz) Why React Router?

React Router v4 introduced a new dynamic, component based approach to routing. React Router v5 introduced some custom Hooks. In this section, you'll learn about the philosophies behind React Router and see a soft introduction to the API.

Passing Props

Passing Props to a component rendered by React Router v5

(Quiz) Passing Props

(Practice) Passing Props

(Solution) Passing Props

In this section you'll learn how to pass props to components being rendered by React Router v5.

404 Pages

Handling 404 pages (catch all routes) with React Router v5

(Quiz) Catch All Routes

(Practice) Catch All Routes

(Solution) Catch All Routes

In this section you'll learn how to implement catch all routes for handling 404 pages in a React app with React Router v5.

Sidebars

(Solution) Sidebars

(Practice) Sidebars

(Quiz) Sidebars

Rendering a Sidebar or Breadcrumbs with React Router

When building an app with React Router, often you'll want to implement a sidebar or breadcrumb navbar. In this section you'll learn how.

Animated Transitions

(Solution) Animated Transitions

(Practice) Animated Transitions

(Quiz) Animated Transitions

Animated Transitions with React Router v5

In this section you'll learn to how to add animated transitions to an app using React Router v5.

Preventing Transitions

(Solution) Preventing Transitions

(Practice) Preventing Transitions

(Quiz) Preventing Transitions

Preventing transitions with React Router v5

Many times when building an app with React Router v5, you want to warn the user before they navigate away from a specific route. An example of this would be when your user has dirtied a form and then wants to navigate away from that page. In this section, you'll learn how to do that.

Outro

Outro

What's next? We answer that in this section.

URL Parameters

(Solution) URL Parameters

(Practice) URL Parameters

(Quiz) URL Parameters

URL Parameters with React Router v5

URL parameters are a fundamental aspect of React Router and a fundamental aspect of building web applications. In this section, you'll break down the 'URL Parameters' example on the React Router v5 documentation to learn how you to effectively leverage URL parameters in your React app.

Programmatically Navigating

(Solution) Programmatically Navigate (Imperative)

(Practice) Programmatically Navigate (Imperative)

(Solution) Programmatically Navigate (Declarative)

(Practice) Programmatically Navigate (Declarative)

(Quiz) Programmatically Navigate

Programmatically navigate using React Router v5

When building an app with React Router v5, eventually you'll run into the question of navigating programmatically. Because of the churn that React Router has gone through in the last few years, there are a lot of outdated, and frankly incorrect tutorials out there. The goal of this section is to break down the correct approaches to programmatically navigating with React Router v5.

Ambiguous Matches

(Solution) Ambiguous Matches

(Practice) Ambiguous Matches

(Quiz) Ambiguous Matches

Ambiguous Matches with React Router v5

When using React Router v5, there are times when you may want to have both a static path like /settings along with a dynamic path like /:uid. The problem is that /settings is ambiguous and will match for both /settings and /:uid. In this section, we'll look at how to fix this ambiguous matches problem with React Router.

Customizing Link

(Solution) Customizing Link

(Practice) Customizing Link

(Quiz) Customizing Link

Customizing your own Link component with React Router

Because React Router v5 is just components, composing your own custom Link component is pretty straightforward. In this section we'll do just that.

Code Splitting

Code Splitting with React Router v5

(Quiz) Code Splitting

(Practice) Code Splitting

(Solution) Code Splitting

Code splitting has gained popularity recently for its ability to allow you to split your app into separate bundles your users can progressively load. In this section we'll take a look at not only what code splitting is and how to do it, but also how to implement it with React Router v5.

Route Config

Route Config with React Router v5

(Quiz) Route Config

(Practice) Route Config

(Solution) Route Config

React Router v5 moved away from a route config approach to routing to a component based approach. However, if you need it, you can still have a central route config with React Router. In this section you'll learn how.