反应路由器在每次转换时滚动到顶部使用 React Hooks 实现 ScrollToTop

javascript reactjs react-router react-router-redux

2022-08-30 00:21:10

我在导航到另一个页面时遇到问题，它的位置将保持与之前的页面一样。因此，它不会自动滚动到顶部。我也尝试过在路由器上使用。我也曾经解决这个问题，但它不起作用。对此有什么建议吗？window.scrollTo(0, 0)onChangescrollBehavior

答案 1

但类是如此2018

使用 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);

用法：

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

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 <Fragment>{children}</Fragment>;
}

export default withRouter(ScrollToTop);

用法：

<Router>
  <ScrollToTop>
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </ScrollToTop>
</Router>

答案 2

此答案仅适用于 v4，不适用于更高版本。

React Router v4 的文档包含用于恢复卷轴的代码示例。这是他们的第一个代码示例，该示例可用作在页面导航到以下位置时“滚动到顶部”的站点范围解决方案：

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

然后将其呈现在应用的顶部，但在路由器下方：

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

// or just render it bare anywhere you want, but just one :)
<ScrollToTop/>

^ 直接从文档中复制

显然，这在大多数情况下都有效，但是关于如何处理选项卡式接口以及为什么没有实现通用解决方案还有更多内容。