removed useHistory

package.json

@@ -26,7 +26,7 @@
     "react-dom": "^17.0.2",
     "react-flip-move": "^3.0.4",
     "react-helmet-async": "^1.3.0",
-    "react-router-dom": "^5.3.4",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "^4.0.3",
     "stripe": "^8.176.0",
     "web-vitals": "^1.1.2"

src/components/header/Header.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import './Header.css';
 import logo from '../../assets/amazon-logo.png';
 import { ReactComponent as LocationSvg } from '../../assets/Location.svg';
@@ -21,7 +21,7 @@ function Header(props) {
     /*this will help you 
     signout*/
   // }
-  let history=useHistory();
+  let navigate=useNavigate();
   const handleAuthentication = () => {
     if (user) {
       auth.signOut();
@@ -73,17 +73,17 @@ function Header(props) {
           {/*this will handle the authentication
     if user is already signed in it will show 
     signout*/}
-          <span className="header__optionLineTwo br-2"  onClick={user ?handleAuthentication:()=>history.push('/login')}>
+          <span className="header__optionLineTwo br-2"  onClick={user ?handleAuthentication:()=>navigate('/login')}>
             {user ? 'Sign Out' : 'Sign In'}
           </span>
           {(value) ? <>
               <div className="nav_arrow"></div>
             <div className="box">
-              <div className="signupbtn" onClick={()=>history.push('/login')}>
+              <div className="signupbtn" onClick={()=>navigate('/login')}>
                 Sign In
               </div>
               <div className="text">
-                New customer?<span className="link" onClick={()=>history.push('/login')}> Start here.</span>
+                New customer?<span className="link" onClick={()=>navigate('/login')}> Start here.</span>
               </div>
             </div>
             </>:null}

src/components/payment/Payment.js

@@ -2,7 +2,7 @@ import React, { useState,useEffect} from 'react'
 import CheckoutProduct from '../checkOut/CheckoutProduct';
 import "./Payment.css" 
 import { useStateValue } from "../../context/StateProvider";
-import {Link,useHistory} from "react-router-dom";
+import {Link,useNavigate} from "react-router-dom";
 import {loadStripe} from "@stripe/stripe-js";
 import {CardElement, useStripe, useElements} from '@stripe/react-stripe-js';
 import CurrencyFormat from "react-currency-format";
@@ -20,7 +20,7 @@ const promise=loadStripe('pk_test_51JdCsbSDjgMnau9ncKpDOaddNIWtdhVTTV92V4ShkTzLe
 function Payment() {
     usePageMeta("Payments - Amazon Clone","Shop with us")
     const[{basket,user},dispatch]=useStateValue();
-    const history=useHistory();
+    const navigate=useNavigate();
 
     //hooks from stripe
 
@@ -84,8 +84,7 @@ const[error,setError]=useState(null);
             setSucceeded(true);
             setError(null);
             setProcessing(false);
-            history.replace("./orders");
-
+            navigate('./orders', { replace: true });
 
         })
 

src/components/subTotal/Subtotal.js

@@ -4,12 +4,12 @@ import './Subtotal.css'
 import CurrencyFormat from "react-currency-format";
 import { useStateValue } from "../../context/StateProvider";
 import { getBasketTotal } from "../../reducer/reducer";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { ReactComponent as TickSvg } from "../../assets/tick.svg";
 
 function Subtotal() {
     //provide browser history
-    const history = useHistory();
+    const navigate = useNavigate();
     const [{ basket }, dispatch] = useStateValue();
     return (
         <div className="subtotal">
@@ -37,7 +37,7 @@ function Subtotal() {
                 thousandSeprator={true}
                 prefix={"₹ "}
             />
-            <button onClick={e => history.push("/payment")} className="proceed__button">Proceed to Buy</button>
+            <button onClick={e => navigate("/payment")} className="proceed__button">Proceed to Buy</button>
         </div>
     );
 }