How to add React Router in a React application

If you are building a single-page application with React, you will likely need to implement routing to navigate between different pages or views within your application. React Router is a popular library that allows you to handle routing in your React application.

Step 1: Install React Router

To add React Router to your React application, you first need to install it using npm or yarn. Open your terminal and run the following command:

npm install react-router-dom

Or if you are using yarn:

yarn add react-router-dom

Step 2: Set up your routes

Next, you need to set up the routes in your application. Create a new file called AppRouter.js and import the necessary components from React Router:


import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';


Define your routes using the Route component within the Switch component:


const AppRouter = () => (

);


Step 3: Implement navigation

In your App component, import the AppRouter component and render it within your app:


import React from 'react';
import AppRouter from './AppRouter';

const App = () => (

);

export default App;


Now you have successfully added React Router to your React application. You can navigate between different routes using links or by programmatically changing the URL in your components.

Remember to configure your server to support client-side routing by redirecting all requests to your index.html file, where your React application is loaded.