React router scroll to top on route visit

Author: realstoman

src/App.js

@@ -7,11 +7,13 @@ import About from './pages/AboutMe';
 import Projects from './pages/Projects';
 import Contact from './pages/Contact';
 import ProjectSingle from './pages/ProjectSingle';
+import ScrollToTop from './components/ScrollToTop';
 
 function App() {
 	return (
 		<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
 			<Router>
+				<ScrollToTop />
 				<AppHeader></AppHeader>
 				<Routes>
 					<Route path="/" element={<Home />} />

src/components/ScrollToTop.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollToTop = () => {
+	const { pathname } = useLocation();
+
+	useEffect(() => {
+		window.scrollTo(0, 0);
+	}, [pathname]);
+	return null;
+};
+
+export default ScrollToTop;