在每次转换时，使react-router返回到顶部

9 浏览
0 Comments

在每次转换时，使react-router返回到顶部

当我跳转到另一个页面时，它的位置会保留在之前的页面上。所以它不会自动滚动到顶部。

我也尝试在onChange路由器上使用window.scrollTo(0, 0)。我还使用scrollBehavior来解决这个问题，但它没有起作用。有关此问题有什么建议吗？

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

React 16.8+


如果您在运行React 16.8或更高版本，使用一个组件来处理每次导航都将窗口滚动到顶部是很容易的：
这里是scrollToTop.js组件

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;
}

然后将其渲染在您的应用程序顶部，但在Router的下方
这里是app.js中的示例

import ScrollToTop from "./scrollToTop";
function App() {
  return (
    
      
      
    
  );
}

或者在index.js中

import ScrollToTop from "./scrollToTop";
ReactDOM.render(
    
        
        
    
    document.getElementById("root")
);

0
0 Comments

但是类已经过时了

使用React Hooks实现的滚动到顶部

ScrollToTop.js

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);
  return (null);
}
export default withRouter(ScrollToTop);

用法：

ScrollToTop也可以作为包装组件实现：

ScrollToTop.js

import React, { useEffect, Fragment } from 'react';
import { withRouter } from 'react-router-dom';
function ScrollToTop({ history, children }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);
  return {children};
}
export default withRouter(ScrollToTop);

用法：

0