Saifi Code

Follow the steps below :  Install the following packages :  npm install @mui/material @emotion/react @emotion/styled   For using ICONS :  npm i @mui/icons-material     For Routing :  npm i react-router-dom FOLDER STRUCTURE should be like : Routing will done at App.js :  import Header from './components/Header' import {   BrowserRouter as Router ,   Routes ,   Route ,   Link } from "react-router-dom" ; import Home from './components/Home' import Edit from './components/Edit' import Add from './components/Add' function App () {   return (     <>       < Header />       < Router >         < Routes >           < Route path = "/" element = { < Home /> } />           < Route path = "/add" element = { < Add /> } />           < Route path = "/edit" element = { < Edit /> } />         </ Routes >       </ Router >     </

In The React Side :  The folder structure will be : Lets start from App.js  On this file we will be adding routing , install the package react-router-dom : import './App.css' ; import React from 'react' ; import {   BrowserRouter as Router ,   Routes ,   Route ,   Link } from "react-router-dom" ; import Signup from './components/Signup' ; import Signin from './components/Signin' ; import Home from './components/Home' ; import ForgetPassword from './components/ForgetPassword' ; import NewSubmit from './components/NewSubmit' ; function App () {   return (     < div >       < Router >         < Routes >           < Route path = "/signup" element = { < Signup /> } />           < Route path = "/signin" element = { < Signin /> } />           < Route path = "/" element = { < Home /> } />           < Route