Add routing to React apps using React Router v4

42 minutes

React Router v4 takes an entirely new approach to routing and handling URLs in your React applications. It fully embraces the concept of declarative programming and a component based development process. In practice, this turns out to be very nice and gives you a routing solution that is less configuration heavy than many previous solutions.

In this course, you will learn about the basics of React Router v4 to help you get started. We will look at the core components that React Router supplies and how they interact together to create a robust routing solution for your React applications.

pro-course-rss-logo

PRO RSS Feed

Run the React Router v4 Examples with Create React App

P

Create Basic Routes with the React Router v4 BrowserRouter

P

Use the React Router v4 Link Component for Navigation Between Routes

P

Style a Link that is Active with NavLink in React Router v4

P

Use URL Parameters with React Router v4

P

Use Regular Expressions with Routes with React Router v4

P

Parse Query Parameters in React Router v4

P

Render Catch-All Routes with React Router v4 using the Switch Component

P

Conditionally Render a React Router v4 Route with the Switch Component

P

Render Multiple Components for the Same Route in React Router v4

P

Render Nested Routes with React Router v4

P

Redirect to Another Page with React Router v4

P

Intercept Route Changes with React Router v4 Prompt Component

P

Understand the Difference Between the React Router v4 Router Types

P
react tutorial about Run the React Router v4 Examples with Create React App

Run the React Router v4 Examples with Create React App

2:15 react PRO

React Router v4 doesn’t require a lot of configuration to run. The core examples will run out of the box with Create React App. In this lesson, you will create an application and get React Router v4 up and running.

react tutorial about Create Basic Routes with the React Router v4 BrowserRouter

Create Basic Routes with the React Router v4 BrowserRouter

6:08 react PRO

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components.

react tutorial about Use the React Router v4 Link Component for Navigation Between Routes

Use the React Router v4 Link Component for Navigation Between Routes

2:01 react PRO

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen.

react tutorial about Style a Link that is Active with NavLink in React Router v4

Style a Link that is Active with NavLink in React Router v4

3:50 react PRO

We often need to be able to apply style to navigation links based on the current route. In React Router v4 you can easily accomplish this with the NavLink component. In this lesson, we will step through three ways to accomplish styling links through the use of an active class with the NavLink component.

react tutorial about Use URL Parameters with React Router v4

Use URL Parameters with React Router v4

2:36 react PRO

URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a particular resource or application state. One way to achieve this is through the use of URL parameters that include important data right in the URL of the route that gets matched in React Router v4.

react tutorial about Use Regular Expressions with Routes with React Router v4

Use Regular Expressions with Routes with React Router v4

1:52 react PRO

We can use regular expressions to more precisely define the paths to our routes in React Router v4.

react tutorial about Parse Query Parameters in React Router v4

Parse Query Parameters in React Router v4

3:08 react PRO

React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so that you can use that additional information as required. There are several strategies for doing this that we will look at.

react tutorial about Render Catch-All Routes with React Router v4 using the Switch Component

Render Catch-All Routes with React Router v4 using the Switch Component

1:24 react PRO

There are many cases where we will need a catch-all route in our web applications. This can include 404-style routes when nothing is match or other use cases where where we receive an invalid route in React Router v4.

react tutorial about Conditionally Render a React Router v4 Route with the Switch Component

Conditionally Render a React Router v4 Route with the Switch Component

1:15 react PRO

We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so a “stack” of Routes will all be processed. To render a single Route exclusively we can wrap them in the Switch component to render the first Route that matches our current URL.

react tutorial about Render Multiple Components for the Same Route in React Router v4

Render Multiple Components for the Same Route in React Router v4

2:43 react PRO

React Router v4 allows us to render Routes as components wherever we like in our components. This can provide some interesting use cases for creating dynamic routes on our applications.

react tutorial about Render Nested Routes with React Router v4

Render Nested Routes with React Router v4

2:17 react PRO

With React Router v4 the entire library is built as a series of React components. That means that creating nested Routes is as simple as creating any other nested element in your application.

react tutorial about Redirect to Another Page with React Router v4

Redirect to Another Page with React Router v4

3:50 react PRO

Overriding a browser's current location without breaking the back button or causing an infinite redirect can be tricky sometimes. In this lesson we'll learn how React Router v4 allows us to easily achieve a redirect without getting bogged down in browser history.

react tutorial about Intercept Route Changes with React Router v4 Prompt Component

Intercept Route Changes with React Router v4 Prompt Component

2:18 react PRO

If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm that data will be lost, React Router v4 provides a Prompt component to interrupt the Route transition and ask the user a question.

react tutorial about Understand the Difference Between the React Router v4 Router Types

Understand the Difference Between the React Router v4 Router Types

6:25 react PRO

React Router introduces several different router types that are useful for various environments where routing is typically needed. The BrowserRouter, NativeRouter, StaticRouter, HashRouter, and MemoryRouter are all available to suit your needs and requirements. Understanding when and why to use the variety of routers is an important part of understanding React Router v4.

Presented by:

Joe Maddalone

Joe is a father of five, lives in Chicago, works as a freelance web developer, shares coding tutorials on egghead.io, and codes for fun when not for work.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?