React Router 过渡后将页面滚动到顶部

Question

在我的应用程序中，当我从一页切换到另一页时，页面将保持在与前一页相同的位置。当我交换页面时，我想让它到顶部。

react-router 文档有解决方案：https://reactrouter.com/web/guides/scroll-restoration

我在一个名为

ScrollToTop

的组件中实现了它，并用它包装了我的整个应用程序，但其中的所有内容都没有被渲染。我不知道为什么。

滚动到顶部：

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

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

应用程序：

import React from 'react';

import './App.css';

import Layout from './containers/Layout/Layout'
import MainPageConfig from './containers/MainPageConfig/MainPageConfig'

import ScrollToTop from './HOC/ScrollToTop'

import { BrowserRouter, Route, Switch } from 'react-router-dom'


function App() {
  return (
    
      <BrowserRouter >        
        <Layout>
          <ScrollToTop>
            <Switch>
              <Route path="/" exact component={MainPageConfig} />
            </Switch>
          </ScrollToTop>
        </Layout>
      </BrowserRouter>
    
    
  );
}

export default App;

我也尝试了这篇文章的建议：react-router scroll to top on every transition

在这两种情况下，我得到相同的结果。

我怎么解决这个问题？

附言我也试着把

ScrollToTop

放在

Layout

外面，但没有任何变化。

Answer 1

你能试试下面的吗

 <BrowserRouter >        
    <Layout>
      <ScrollToTop />
        <Switch>
          <Route path="/" exact component={MainPageConfig} />
        </Switch>
    </Layout>
  </BrowserRouter>

Answer 2

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

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return <>{children}</>;
}

让孩子们从树上下来

Answer 3

自 React Router 6.4 以来，

ScrollRestoration

组件 可用于在导航到新页面后滚动到顶部（以及在返回上一页时恢复旧滚动位置）。

此组件将在加载程序完成后模拟浏览器在位置更改时的滚动恢复，以确保滚动位置恢复到正确的位置，即使跨域也是如此。

在应用程序的根路由组件中渲染一次

ScrollRestoration

以使用它：

import { ScrollRestoration } from "react-router-dom";
function App() {
    return <>
        { /* content here... */ }
        <ScrollRestoration />
    </>;
}