React Router Tutorial for Beginners

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'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.

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'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'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:

npm install react-router-dom

2. Import the BrowserRouter component from the react-router-dom package:

import { BrowserRouter } from 'react-router-dom';

3. Wrap your application in the BrowserRouter component:

<BrowserRouter>
  <App />
</BrowserRouter>

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 Route 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 /home is matched, you can use the following code:

<Route path="/home" component={Home} />

The Home component will be rendered when the path /home is matched.

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

<Switch>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
</Switch>

The Home component will be rendered when the path /home is matched, and the About component will be rendered when the path /about 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 /home is matched:

<Route path="/home" component={Home} />

2. Rendering a component when the path /about is matched:

<Route path="/about" component={About} />

3. Rendering a component when the path /contact is matched:

<Route path="/contact" component={Contact} />

4. Rendering a component when the path /profile is matched:

<Route path="/profile" component={Profile} />

5. Rendering a component when the path /login is matched:

<Route path="/login" component={Login} />

6. Rendering a component when the path /register is matched:

<Route path="/register" component={Register} />

7. Rendering a component when the path /dashboard is matched:

<Route path="/dashboard" component={Dashboard} />

8. Rendering a component when the path /settings is matched:

<Route path="/settings" component={Settings} />

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 Route and Switch components. We have also seen some code examples of how to use React Router in a React application.