Installing React Router

Introduction

Before using routing features in a React application, React Router must be installed and properly configured. React Router is not included by default with React, so developers need to add it as a dependency.

This section explains how to install React Router, which package to use, and how to verify a successful installation.

What is React Router DOM?

For web-based React applications, the official package is react-router-dom. It provides routing components such as BrowserRouter, Routes, Route, and Link that work in browsers.

React Router packages:

• react-router-dom – For web applications
• react-router-native – For React Native applications

For OnlineLearner.in tutorials, we focus on react-router-dom.

Step 1: Create a React Application (If Not Already Created)

If you do not have a React project yet:

npx create-react-app my-app
cd my-app
npm start

Step 2: Install React Router DOM

Install the latest version using npm:

npm install react-router-dom

Or using yarn:

yarn add react-router-dom

This command adds React Router to your project dependencies.

Step 3: Verify Installation

Check package.json:

"dependencies": {
  "react-router-dom": "^6.x.x"
}

If present, React Router is successfully installed.

Step 4: Basic Setup After Installation

After installation, wrap your application with BrowserRouter.

index.js or main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

This step enables routing throughout the application.

Why BrowserRouter Is Required

BrowserRouter:

• Listens to URL changes
• Syncs UI with browser history
• Enables navigation without page reload

Without BrowserRouter, routing components will not work.

Common Installation Mistakes

1. Forgetting to install react-router-dom
2. Using incorrect import paths
3. Not wrapping the app with BrowserRouter
4. Mixing older React Router v5 syntax with v6

Always ensure you follow React Router v6 syntax for new projects.

Version Note (Important)

React Router v6 introduced major changes:

• Switch replaced by Routes
• Component replaced by element
• Exact is removed

OnlineLearner.in tutorials are based on React Router v6, which is the current standard.

Interview Questions and Answers – Installing React Router

1. How do you install React Router in a React project?

By running npm install react-router-dom.

2. Which package is used for routing in React web applications?

react-router-dom.

3. Is React Router included with React by default?

No, it must be installed separately.

4. Why do we wrap App with BrowserRouter?

To enable routing and synchronize UI with browser history.

5. What happens if BrowserRouter is not used?

Routing components like Route and Link will not work.

6. Which version of React Router should be used for new projects?

React Router v6.

7. Can React Router be installed using yarn?

Yes, using yarn add react-router-dom.

8. Where should BrowserRouter be placed?

At the root level, usually in index.js or main.jsx.

9. What is the purpose of react-router-native?

It is used for routing in React Native applications.

10. How do you confirm React Router is installed?

By checking package.json or node_modules folder.