add: helpers for scrolltotop use react-router-dom

src/helpers/ScrollToTop.jsx

@@ -0,0 +1,13 @@
+import { useLayoutEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const ScrollToTop = ({ children }) => {
+  const { pathname } = useLocation();
+
+  useLayoutEffect(() => {
+    document.documentElement.scrollTo(0, 0);
+  }, [pathname]);
+  return children;
+};
+
+export default ScrollToTop;

src/routes/index.jsx

@@ -6,19 +6,22 @@ import Blogs from "../pages/Blogs";
 import Contact from "../pages/Contact";
 import NotFound from "../pages/NotFound";
 import Certification from "../pages/Certification";
+import ScrollToTop from "../helpers/ScrollToTop";
 
 const Router = () => {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<About />} />
-        <Route path="/skills" element={<Skills />} />
-        <Route path="/projects" element={<Projects />} />
-        <Route path="/certification" element={<Certification />} />
-        <Route path="/blogs" element={<Blogs />} />
-        <Route path="/contact" element={<Contact />} />
-        <Route path="*" element={<NotFound />} />
-      </Routes>
+      <ScrollToTop>
+        <Routes>
+          <Route path="/" element={<About />} />
+          <Route path="/skills" element={<Skills />} />
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/certification" element={<Certification />} />
+          <Route path="/blogs" element={<Blogs />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </ScrollToTop>
     </BrowserRouter>
   );
 };