In a React application, components retrieve site content and render it to a single HTML file in your project.

React Router helps you navigate to the component of your choice and renders it in the HTML file. To use it, you need to know how to set up and integrate React Router with your React application.

How to Install React Router

To install React Router into your React project using npm, the JavaScript package manager, run the following command in your project directory:

Alternatively, you can download the package using Yarn, a package manager that allows you to install library packages offline.

To install React Router using Yarn, run this command:

Setting Up React Router

To configure React Router and make it available in your application, import BrowserRouter from react-router-dom inside your index.js file, then wrap your app component in the BrowserRouter element:

Wrapping the app component in the BrowserRouter element gives the entire app full access to the Router’s abilities.

Routing to Other Components

After setting up your Router in your application, you should go ahead and create your app components, route them, and render them. The following code imports and creates components named “Home”, “About”, and “Blog”. It also imports the Route and Routes elements from react-router-dom.

You will define your Routes inside the App component:

The App component is the main component that renders all the code you have written in your other components.

The Routes element is the parent element that wraps the individual routes you create in your app component. The Route element creates a single route. It takes two prop attributes: a path and an element.

The path attribute defines the URL path of the intended component. The first Route in the above code block uses a backslash (/) as its path. This is a special route that React will render first, so the Home component renders when you run your application. Do not confuse this system with implementing conditional rendering in your React Components. You can give this path attribute any name you like.

The element attribute defines the component that the Route will render.

The link component is a React Router component used to navigate different routes. These components access the various routes you’ve created.

For example:

The link component is nearly identical to the HTML anchor tag , it just uses an attribute named “to” instead of “href”. The link component navigates to the Route with the corresponding pathname as its attribute and renders the Route’s component.

Nested Routing and How to Implement It

The React Router supports nested routing, allowing you to wrap multiple Routes into a single Route. This is mainly used when there is some similarity in the URL paths of the Routes.

Once you have created the components you wish to route, you will develop individual Routes for each of them in the app component.

For example:

The code block above imports and routes the created components Articles, NewArticle, and ArticleOne. There are some similarities in the URL paths between the three routes.

The NewArticle Route’s pathname starts the same as the Articles Route’s pathname, with an added backslash (/) and the word “new”, i.e (/new). The only difference between the path names of the Articles Route and the ArticleOne Route is the slash (/1) at the end of the ArticleOne component’s pathname.

You can nest the three Routes rather than leaving them in their current state.

Like so:

You have wrapped the three individual Routes in a single Route element. Note that the parent Route element only has the path attribute and no element attribute that defines the component to render. The index attribute in the first child Route element specifies that this Route renders when you navigate to the URL path of the parent Route.

To make your code better and more maintainable, you should define your Routes in a component and import it into the app component for use.

For example:

The component in the code block above contains the nested Routes that were formerly in the app component. After creating the component, you should import it into the app component and route it using a single Route element.

For example:

In the final Route component, the added backslash and asterisk symbols at the end of the Route’s pathname ensure that the pathname corresponds to any pathname that begins with (/article).

There’s More to React Router

You should now be familiar with the basics of how to build single-page applications in React.js, using React Router.

There are many more features available in the React Router library that make the developer experience more dynamic when building web applications.