Scroll to top

src/App.js

@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import ScrollToTop from './ScrollToTop'; 
 import { useStateValue } from "./StateProvider";
 import { loadStripe } from "@stripe/stripe-js";
 import { Elements } from "@stripe/react-stripe-js";
@@ -60,6 +61,7 @@ function App() {
   return (
     <StateProvider initialState={initialState} reducer={reducer}>
       <Router>
+      <ScrollToTop />
         <div className="app">
           <Header />
           <Routes>

src/ScrollToTop.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+function ScrollToTop() {
+    const { pathname } = useLocation();
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, [pathname]);  // Scroll to top whenever the route changes
+
+    return null;
+}
+
+export default ScrollToTop;