scroll to top on URL change

haddercone · Aug 1, 2023 · bd202f1 · bd202f1
1 parent ef932e7
commit bd202f1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/components/AppLayout.js b/src/components/AppLayout.js
@@ -5,21 +5,25 @@ import { useState } from "react";
 import UserContext from "../utils/UserContext";
 import { Provider } from "react-redux";
 import store from "../utils/store";
-
+import ScrollToTop from "./ScrollToTop";
 const AppLayout = () => {
   const [user, setUser] = useState({
     name: "Robin Singh",
     email: "44robin.rs@gmail.com",
   });
 
   return (
+    <>
+    <ScrollToTop />
     <Provider store={store}>
       <UserContext.Provider value={{ user: user, setUser: setUser }}>
+
         <Head />
         <Outlet />
         <Footer />
       </UserContext.Provider>
     </Provider>
+    </>
   );
 };
 

diff --git a/src/components/ScrollToTop.js b/src/components/ScrollToTop.js
@@ -0,0 +1,12 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+  return null;
+};
+
+export default ScrollToTop;