React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application, keeping the URL in sync with what&#x27;s being displayed on the page. In this tutorial, we will be exploring the basics of React Router and how to use it in creating a simple React application.

![react router tutorial](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover13.jpg)
## What Is React Router?

React Router is a routing library built on top of React that helps developers add new screens and flows to their React applications, keeping the URL in sync with what&#x27;s being displayed on the page. It is used by many popular websites, including Facebook, Airbnb, and The New York Times. React Router provides a way to keep the URL in sync with what&#x27;s being displayed on the page, as well as providing features like navigation guards and route parameters.

## How To Install React Router

Installing React Router is easy and can be done with the following steps:

1.  Install the React Router package via npm:

&#96;&#96;&#96;
npm install react-router-dom
&#96;&#96;&#96;

2.  Import the &#96;BrowserRouter&#96; component from the &#96;react-router-dom&#96; package:

&#96;&#96;&#96;
import { BrowserRouter } from &#x27;react-router-dom&#x27;;
&#96;&#96;&#96;

3.  Wrap your application in the &#96;BrowserRouter&#96; component:

&#96;&#96;&#96;
&lt;BrowserRouter&gt;
  &lt;App &#x2F;&gt;
&lt;&#x2F;BrowserRouter&gt;
&#96;&#96;&#96;

4.  Start using React Router in your application!

## Adding React Router Components

Once you have installed React Router, you can start using it to add new screens and flows to your application. This can be done by using the &#96;Route&#96; component, which allows you to specify a path and a component to render when the path is matched.

For example, if you want to render a component when the path &#96;&#x2F;home&#96; is matched, you can use the following code:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;home&quot; component={Home} &#x2F;&gt;
&#96;&#96;&#96;

The &#96;Home&#96; component will be rendered when the path &#96;&#x2F;home&#96; is matched.

You can also use the &#96;Switch&#96; component to render only one component when a path is matched. For example, if you want to render a component when the path &#96;&#x2F;home&#96; is matched, and a different component when the path &#96;&#x2F;about&#96; is matched, you can use the following code:

&#96;&#96;&#96;
&lt;Switch&gt;
  &lt;Route path=&quot;&#x2F;home&quot; component={Home} &#x2F;&gt;
  &lt;Route path=&quot;&#x2F;about&quot; component={About} &#x2F;&gt;
&lt;&#x2F;Switch&gt;
&#96;&#96;&#96;

The &#96;Home&#96; component will be rendered when the path &#96;&#x2F;home&#96; is matched, and the &#96;About&#96; component will be rendered when the path &#96;&#x2F;about&#96; is matched.

## React Router Code Examples

Here are some code examples of how to use React Router in a React application:

1.  Rendering a component when the path &#96;&#x2F;home&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;home&quot; component={Home} &#x2F;&gt;
&#96;&#96;&#96;

2.  Rendering a component when the path &#96;&#x2F;about&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;about&quot; component={About} &#x2F;&gt;
&#96;&#96;&#96;

3.  Rendering a component when the path &#96;&#x2F;contact&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;contact&quot; component={Contact} &#x2F;&gt;
&#96;&#96;&#96;

4.  Rendering a component when the path &#96;&#x2F;profile&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;profile&quot; component={Profile} &#x2F;&gt;
&#96;&#96;&#96;

5.  Rendering a component when the path &#96;&#x2F;login&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;login&quot; component={Login} &#x2F;&gt;
&#96;&#96;&#96;

6.  Rendering a component when the path &#96;&#x2F;register&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;register&quot; component={Register} &#x2F;&gt;
&#96;&#96;&#96;

7.  Rendering a component when the path &#96;&#x2F;dashboard&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;dashboard&quot; component={Dashboard} &#x2F;&gt;
&#96;&#96;&#96;

8.  Rendering a component when the path &#96;&#x2F;settings&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;settings&quot; component={Settings} &#x2F;&gt;
&#96;&#96;&#96;

## Conclusion

In this tutorial, we have explored the basics of React Router and how to use it in creating a simple React application. We have seen how to install React Router and how to add new screens and flows to our application using the &#96;Route&#96; and &#96;Switch&#96; components. We have also seen some code examples of how to use React Router in a React application.

React Router Tutorial for Beginners

About

Legal

Products

Resources

Category: