Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
15 days ago

How can I make the page scroll to the top when the route changes?

Here is the modified paragraph: I am working with react.js version 18.2.0 and using react-router-dom v6. The issue I am facing is that when I scroll down on the homepage and then navigate to another page, such as the terms and conditions page, the expected behavior is that the window should scroll to the top. However, the current behavior leaves the window at the same level of scrollY.

I have attempted every possible solution, such as using the ScrollToTop component and the ScrollRestoration component. Here is an example of my App.js:


import { useState } from "react";
import { MemoryRouter as Router, Routes, Route } from "react-router-dom";
import { createTheme, ThemeProvider } from "@mui/material";
import { Home, Support, About, ContactUs, Terms, Calculator } from "./views";
import './styles/global.css';
import themes from "./utils/ThemeUtils";
import Layout from "./components/Layout";
import FullLayout from "./components/FullLayout";

function App() {
    const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");
    const lightTheme = createTheme(themes.lightTheme);
    const darkTheme = createTheme(themes.darkTheme);

    return (
        <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
            <Router >
                <Routes>
                    <Route element={<Layout setTheme={setTheme} theme={theme} />}>
                        <Route path="/" element={<Home />} />
                        <Route path="/about" element={<About />} />
                        <Route path="/terms" element={<Terms />} />
                        <Route path="/contact" element={<ContactUs />} />
                        <Route path="/support" element={<Support />} />
                    </Route>
                    <Route element={<FullLayout setTheme={setTheme} theme={theme} />}>
                        <Route path="/calculate" element={<Calculator />} />
                    </Route>
                </Routes>
            </Router>
        </ThemeProvider>
    );
}
As you can see, my App.js file has the necessary code for implementing react-router-dom v6. However, I am still struggling to solve the scrolling issue. If you have any suggestions, I would appreciate your help.

Answers(1)
avatar
Tolerim
15 days ago
Verified Answer
One solution could be to use the useEffect hook in your ScrollToTop component to scroll the window to the top on every route change. Additionally, you can wrap any component that needs to have this behavior with the ScrollToTop component. Here's an example of how you can implement this: 
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function ScrollToTop() {
  const { pathname } = useLocation();

  // Scroll window to top on every route change
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

function App() {
  // Rest of your App component code
  
  return (
    <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
      <Router>
        <ScrollToTop />
        {/* Rest of your Routes and components */}
      </Router>
    </ThemeProvider>
  );
}

export default App;
In this example, we have created a new component called ScrollToTop which uses the useLocation hook from react-router-dom to detect route changes. We then use the useEffect hook to scroll the window to the top of the page on every route change. We also wrap our Router component with this ScrollToTop component to achieve the desired behavior.
;