转换后 React Router 滚动页面到顶部

Posted 2023-02-21

【中文标题】转换后 React Router 滚动页面到顶部

【英文标题】：React Router scroll page to the top after transition

【发布时间】：2021-01-29 08:56:27

【问题描述】：

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

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

我在一个名为ScrollToTop 的组件中实现了它，并用它包装了我的整个应用程序，但它里面的所有东西都没有被渲染。我不知道为什么。

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 之外，但没有任何变化。

【问题讨论】：

你能定义另一个Route并再次测试。例如

我已经这样做了。实际上，我的原始应用程序有多个路线。我删除它们只是为了使它更简单。但你为什么这么认为？也许它可以给我一个洞察力。

【参考方案1】：

你可以试试下面的

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

【讨论】：

我不明白。这与我在问题中发布的代码完全相同。

Switch 没有包裹在 ScrollToTop 组件中。刚刚在代码沙箱上尝试过。

你是对的。我的错。有效。我刚刚检查了文档，这确实是应该如何实现的，但我看不到。非常感谢。

【参考方案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</>;

把孩子从树下传下去