React router download file

React Router is the de facto standard routing library for React. When you need to navigate through a React application with multiple views, you’ll need a router to manage the URLs. React Router takes care of that, keeping your application UI and the URL in sync.

This tutorial introduces you to React Router v5 and a whole lot of things you can do with it.

Introduction

React is a popular library for creating single-page applications (SPAs) that are rendered on the client side. An SPA might have multiple views (aka pages), and unlike conventional multi-page apps, navigating through these views shouldn’t result in the entire page being reloaded. Instead, we want the views to be rendered inline within the current page. The end user, who’s accustomed to multi-page apps, expects the following features to be present in an SPA:

• Each view should have a URL that uniquely specifies that view. This is so that the user can bookmark the URL for reference at a later time. For example, .
• The browser’s back and forward button should work as expected.
• Dynamically generated nested views should preferably have a URL of their own too — such as , where 101 is the product ID.

Routing is the process of keeping the browser URL in sync with what’s being rendered on the page. React Router lets you handle routing declaratively. The declarative routing approach allows you to control the data flow in your application, by saying “the route should look like this”:

You can place your component anywhere you want your route to be rendered. Since , and all the other React Router APIs that we’ll be dealing with are just components, you can easily get up and running with routing in React.

Note: there’s a common misconception that React Router is an official routing solution developed by Facebook. In reality, it’s a third-party library that’s widely popular for its design and simplicity.

Overview

This tutorial is divided into different sections. First, we’ll set up React and React Router using npm. Then we’ll jump right into some React Router basics. You’ll find different code demonstrations of React Router in action. The examples covered in this tutorial include:

• basic navigational routing
• nested routing
• nested routing with path parameters
• protected routing

All the concepts connected with building these routes will be discussed along the way.

The entire code for the project is available on this GitHub repo.

Let’s get started!

Setting up React Router

To follow along with this tutorial, you’ll need a recent version of Node installed on your PC. If this isn’t the case, then head over to the Node home page and download the correct binaries for your system. Alternatively, you might consider using a version manager to install Node. We have a tutorial on using a version manager here.

Node comes bundled with npm, a package manager for JavaScript, with which we’re going to install some of the libraries we’ll be using. You can learn more about using npm here.

You can check that both are installed correctly by issuing the following commands from the command line:

With that done, let’s start off by creating a new React project with the Create React App tool. You can either install this globally, or use , like so:

When this has finished, change into the newly created directory:

The React Router library comprises three packages: react-router, react-router-dom, and react-router-native. The core package for the router is , whereas the other two are environment specific. You should use if you’re building a website, and if you’re in a mobile app development environment using React Native.

Use npm to install :

Then start the development server with this:

Congratulations! You now have a working React app with React Router installed. You can view the app running at http://localhost:3000/.

React Router Basics

Now let’s familiarize ourselves with a basic React Router setup. To do this, we’ll make an app with three separate views: Home, Category and Products.

The Component

The first thing we’ll need to do is to wrap our component in a component (provided by React Router). Since we’re building a browser-based application, we can use two types of router from the React Router API:

The primary difference between them is evident in the URLs they create:

The is the more popular of the two because it uses the HTML5 History API to keep your UI in sync with the URL, whereas the uses the hash portion of the URL (). If you need to support legacy browsers that don’t support the History API, you should use . Otherwise is the better choice for most use cases. You can read more about the differences here.

So, let’s import the component and wrap it around the component:

The above code creates a instance for our entire component. Let’s look at what that means.

A Little Bit of History

The library lets you easily manage session history anywhere JavaScript runs. A object abstracts away the differences in various environments and provides a minimal API that lets you manage the history stack, navigate, and persist state between sessions. — React Training docs

Each component creates a object that keeps track of the current location () and also the previous locations in a stack. When the current location changes, the view is re-rendered and you get a sense of navigation. How does the current location change? The history object has methods such as and to take care of that. The method is invoked when you click on a component, and is called when you use a . Other methods — such as and — are used to navigate through the history stack by going back or forward a page.

Moving on, we have Links and Routes.

and Components

The component is the most important component in React Router. It renders some UI if the current location matches the route’s path. Ideally, a component should have a prop named , and if the path name matches the current location, it gets rendered.

The component, on the other hand, is used to navigate between pages. It’s comparable to the HTML anchor element. However, using anchor links would result in a full page refresh, which we don’t want. So instead, we can use to navigate to a particular URL and have the view re-rendered without a refresh.

Now we’ve covered everything you need to make our app work. Update as follows:

Here, we’ve declared the components for , and inside . Although this is okay for now, when a component starts to grow bigger, it’s better to have a separate file for each component. As a rule of thumb, I usually create a new file for a component if it occupies more than 10 lines of code. Starting from the second demo, I’ll be creating a separate file for components that have grown too big to fit inside the file.

Inside the component, we’ve written the logic for routing. The ‘s path is matched with the current location and a component gets rendered. Previously, the component that should be rendered was passed in as a second prop. However, recent versions of React Router have introduced a new route rendering pattern, whereby the component(s) to be rendered are children of the .

Here matches both and . Therefore, both the routes are matched and rendered. How do we avoid that? You should pass the prop to the with :

If you want a route to be rendered only if the paths are exactly the same, you should use the exact prop.

Nested Routing

To create nested routes, we need to have a better understanding of how works. Let’s look at that now.

As you can read on the React Router docs, the recommended method of rendering something with a is to use elements, as shown above. There are, however, a few other methods you can use to render something with a . These are provided mostly for supporting apps that were built with earlier versions of the router before hooks were introduced:

• : when the URL is matched, the router creates a React element from the given component using .
• : handy for inline rendering. The prop expects a function that returns an element when the location matches the route’s path.
• : this is similar to , in that it expects a function that returns a React component. However, gets rendered regardless of whether the path is matched with the location or not.

Path and Match

The prop is used to identify the portion of the URL that the router should match. It uses the Path-to-RegExp library to turn a path string into a regular expression. It will then be matched against the current location.

If the router’s path and the location are successfully matched, an object is created which is called a match object. The object contains more information about the URL and the path. This information is accessible through its properties, listed below:

• : a string that returns the matched portion of the URL. This is particularly useful for building nested components.
• : a string that returns the route’s path string — that is, . We’ll be using this to build nested components.
• : a Boolean that returns true if the match was exact (without any trailing characters).
• : an object containing key/value pairs from the URL parsed by the Path-to-RegExp package.

Implicit Passing of Props

Note that when using the prop to render a route, the , and route props are implicitly passed to the component. When using the newer route rendering pattern, this is not the case.

For example, take this component:

Now render the route like so:

This will log the following:

But now instead render the route like so:

This will log the following:

This might seem disadvantageous at first, but worry not! React v5.1 introduced several hooks to help you access what you need, where you need it. These hooks give us new ways to manage our router’s state and go quite some way to tidying up our components.

I’ll be using some of these hooks throughout this tutorial, but if you’d like a more in-depth look, check out the React Router v5.1 release announcement. Please also note that hooks were introduced in version 16.8 of React, so you’ll need to be on at least that version to use them.

The Component

Before we head to the demo code, I want to introduce you to the Switch component. When multiple s are used together, all the routes that match are rendered inclusively. Consider this code from demo 1. I’ve added a new route to demonstrate why is useful:

If the URL is , all the routes that match the location are rendered. So, the with path gets rendered along with the component. This is by design. However, if this is not the behavior you’re expecting, you should add the component to your routes. With , only the first child that matches the location gets rendered:

The part of is used for dynamic routing. It will match anything after the slash and make this value available in the component. We’ll see an example of this at work in the next section.

Now that we know all about the and components, let’s add nested routes to our demo.

Dynamic Nested Routing

Earlier on, we created routes for , and . But what if we wanted a URL in the form of ?

Let’s start by updating as follows:

You’ll notice that we’ve moved into its own component. This is where our nested routes should go.

Let’s create now:

Here, we’re using the useRouteMatch hook to gain access to the object. As previously mentioned, will be used for building nested links and for nested routes. If you’re having trouble understanding the concept of match, provides some useful information that might help to clarify it.

This is our first proper attempt at dynamic routing. Instead of hard-coding the routes, we’ve used a variable within the prop. is a path parameter and catches everything after until another forward slash is encountered. So, a path name like will create a object as follows:

To access this value within the component, we’re using the useParams hook, which returns an object of key/value pairs of URL parameters.

Try this out in your browser. The Category section should now have three sub-sections, each with their own route.

Nested Routing With Path Parameters

Let’s complicate things a bit more, shall we? A real-world router will have to deal with data and display it dynamically. Let’s assume we have some product data returned by an API in the following format:

Let’s also assume that we need to create routes for the following paths:

• : this should display a list of products.
• : if a product with the exists, it should display the product data, and if not, it should display an error message.

Create a new file and add the following (making sure to copy in the product data from above):

First, we use the hook to grab the URL from the object. Then we build a list of components using the property from each of our products, which we store in a variable.

The first route uses a variable in the prop which corresponds to that of the product ID. When it matches, we render out the component (which we’ll define in a minute), passing it our product data:

The second route has an prop, so will only render when the URL is and nothing is selected.

Now, here’s the code for the component. You’ll need to create this file at :

The method is used to search the array for an object with an ID property that equals . If the product exists, the is displayed. If not, a “Product doesn’t exist” message is rendered.

Finally, update your component as follows: