Install 'react-router-dom': If you haven't already, you need to install the 'react-router-dom' package. You can do this using npm or yarn. Open your terminal and run one of the following commands:

npm install react-router-dom

Next

import BrowserRouter

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

• In the index.js file, you import the necessary dependencies, including React, ReactDOM, BrowserRouter, Routes, and Route from 'react-router-dom'.

• You create a React root using ReactDOM.createRoot and specify the root DOM element with the id 'root' where your React application will be rendered.

• Inside the root.render function, you wrap your entire application with <BrowserRouter>. This component provides routing functionality for your app by utilizing HTML5 history API.

• You render the <App /> component inside the <BrowserRouter>. This means that the <App /> component will serve as the entry point for your application.

App.js:

import Home from "./web/Home";
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="home" element={<Home />} />
        {/* Add more routes here */}
      </Routes>
    </div>
  );
}

export default App;

• In the App.js file, you import the Home component and the Routes and Route components from 'react-router-dom'.

• You define a functional React component called App. This component represents the main structure of your application.

• Inside the App component, you use the <Routes> component to define your application's routes. Each <Route> component corresponds to a specific URL path and specifies the component to render when that path is matched.

• In this code, you have defined two routes:

  • The first route (<Route path="/" element={<Home />} />) matches the root path ('/') and renders the Home component when the root URL is accessed.
  • The second route (<Route path="home" element={<Home />} />) matches the '/home' path and also renders the Home component.

• You can add more routes inside the <Routes> component as needed for your application.

In summary, this code sets up a basic React application with routing using 'react-router-dom'. The <BrowserRouter> component is used to provide routing capabilities, and the <Routes> and <Route> components define the routes and their corresponding components. In this example, the App component is the main entry point for your application and handles routing for the 'Home' component based on URL paths.