如何使用 React router dom v6 滚动到路由更改顶部？

Question

如何使用 React router dom v6 滚动到路由更改顶部？

我已经尝试过这个，react-router在每次转换时滚动到顶部，这是我的解决方案，当我使用v5时，使我的页面在路线更改时滚动到顶部react-router-dom。现在，我使用的是react-router-domv6，这个解决方案不起作用。

我尝试了React-router v6 window.scrollTo 不起作用 ，也不适合我。

我尝试了https://github.com/remix-run/react-router/issues/7365，即使用preloadprop 来触发scrollTo(0,0)，对我来说也不起作用。

Answer 1

好吧，我不太确定您的布局是什么样的，但在您的内部，<BrowserRouter /> 您可以将您的应用程序包装在包装器中，并检查useLayoutEffect. 然后，如果有更改，您可以滚动到顶部。这是一个粗略的例子。

代码沙箱

import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom'
import { useLayoutEffect } from 'react'

const Wrapper = ({children}) => {
  const location = useLocation();
  useLayoutEffect(() => {
    document.documentElement.scrollTo(0, 0);
  }, [location.pathname]);
  return children
} 

const Component = ({title}) => {
  return (
    <div>
      <p style={{paddingTop: '150vh'}}>{title}</p>
    </div>
  )
}

const App = () => {
  return (
    <BrowserRouter>
      <Wrapper>
        <p>Scroll the bottom to change pages</p>

        <Routes>
          <Route path="/" element={<Component title="Home"/>} />
          <Route path="/about" element={<Component title="About"/>} />
          <Route path="/product" element={<Component title="Product"/>} />
        </Routes>

        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/product">Product</Link>
      </Wrapper>
    </BrowserRouter>
  )
}

export default App

Answer 2

this article resolves this issue See it -> https://www.matthewhoelter.com/2022/04/02/how-to-scroll-to-top-on-route-change-with-react-router-dom-v6.html

make ScrollToTop component

and then add this code init

import { useLocation } from "react-router-dom";

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

  useEffect(() => {
    // "document.documentElement.scrollTo" is the magic for React Router Dom v6
    document.documentElement.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant", // Optional if you want to skip the scrolling animation
    });
  }, [pathname]);

  return null;
}

and then import it in your App.js and now your issue is resolved

see img

Answer 3

我使用ScrollRestoration。我尝试过，如果没有使用 ScrollRestoration 组件， window.scrollTo(0, 0) 它不起作用。

 import { Outlet, useLocation, ScrollRestoration } from 'react-router-dom'
    function App() {
       const { pathname } = useLocation()
       useLayoutEffect(() => {
          window.scrollTo(0, 0)
       }, [pathname])
       return (
           <div className="App">
              <TopHeader />
              <Outlet />
              <Footer />
              <ScrollRestoration />
           </div>
        )
     }

     export default App

Answer 4

const scrollToPosition = (top = 0) => {
  try {
    /**
     * Latest API
     */
    window.scroll({
      top: top,
      left: 0,
      behavior: "smooth",
    });
  } catch (_) {
    /**
     * Fallback
     */
    window.scrollTo(0, top);
  }
};

您可以使用上面的代码滚动顶部。

const didMount = useDidMount();
const router = useRouter();
const { asPath } = router;
useEffect(() => {
    if (didMount) {
      scrollToPosition();
    }
  }, [asPath]);

并将上述代码添加到顶部父组件中。