ReactJS Tutorial

Introduction to ReactJs Routers and Routing

Table of Contents

  • What is Router in React?
  • What is Routing?
  • Why do you need a Router in React?
  • Test your knowledge with a quick quiz!
  • How to install React Router?

What is Router in React?

Router in ReactJS is a standard library for routing. 

What does a React router do?

  • Enables navigation among various components.

  • Allows hanging the browser URL

  • Keeps the UI in sync with the URL

What is Routing?

Routing directs a user to different pages in a React application based on their action or request. In React, routers are primarily used to develop Single Page Web Applications. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular route.

Why do you need a Router in React?

The main purpose of using React Router is to display multiple views in a single page application. For example, social media websites like Facebook and Instagram use React Router for rendering multiple views.

Test your knowledge with a quick quiz!

What is React Router?

Select the correct answer

How to install React Router?

You can install React Router in your React application via npm. Here are the steps to install React Router.

Step 1: cd into your project directory.

Step 2: Use the following command to install the router.

npm install –save react-router-dom

Now you need to add its components to your React application. Run the following code in the terminal from the root directory.

npm i -D react-router-dom

Did you find this article helpful?