React Router

 React Router:

React Router is a popular library for handling routing in React applications. Routing is the process of navigating between different views or components based on the URL or user interactions. React Router allows you to build single-page applications (SPAs) with multiple "pages" or views without the need for full page reloads.

step 1: React Router install : npm i -D react-router-dom

Home.js :

import React from "react";

import "./home.css";

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

function Home(){

   return <div className="BillingSystem">

      <Link to ='/billing'>

      <button className="Redirect-buttons">Billing</button>

      </Link>

      <Link to ='/inventory'>

      <button className="Redirect-buttons">Inventory</button>

      </Link>

<Link to ='/itemrequest'>

      <button className="Redirect-buttons">Item Request</button>

      </Link>

<Link to ='/salesreport'>

      <button className="Redirect-buttons">Sales Report</button>

      </Link>

  </div>

}

export default Home;

Home.css:

.Redirect-buttons{

padding: 20px 40px;

margin: 5px;

border: none;

border-radius: 18px;

background-color: red;

color: white;

font-size: 15px;

cursor: pointer;

}

.Redirect-buttons:hover{

   background-color: aliceblue;

   color: black;

}

.BillingSystem{

   display: flex;

   flex-direction: row;

   justify-content: center;

   margin-top: 50px;

}

App.js:

import React from "react";

import Home from "./home";

import Billing from "./Billing";

import Inventroy from "./Inventroy";

import ItemRequet from "./ItemRequest";

import SalesReport from "./SalesReport";

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

function  App(){

  return <div>

    

    <Routes>

    <Route path="/" element={<Home/>}/>

    <Route path="billing" element={<Billing/>}/>

    <Route path="inventory" element={<Inventroy/>}/>

    <Route path="itemrequest" element={<ItemRequet/>}/>

    <Route path="salesreport" element={<SalesReport/>}/>

    </Routes>

    </div>

}

export default App;

Index.js:

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from "./App";

import reportWebVitals from './reportWebVitals';

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

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

root.render(

  <BrowserRouter>

  

  <App />

</BrowserRouter>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

Inventory.js:

import React from "react";

class Inventroy extends React.Component{

   render(){

      return <div>

         <h1>Inventory</h1>

      </div>

   }

}

export default Inventroy;

Item Request.js:

import React from "react";

class ItemRequest extends React.Component{

   render(){

      return<div>

         <h1>Item Request</h1>

      </div>

   }

}

export default ItemRequest;

SalesReport.js:

import React from "react";

class SalesReport extends React.Component{

   render(){

      return <div>

         <h1>Sales Report</h1>

      </div>

   }

}

export default SalesReport;