React-Static 在页面更改时滚动到顶部答案

【问题标题】：React-Static scroll to top on page changeReact-Static 在页面更改时滚动到顶部
【发布时间】：2020-08-08 03:25:57
【问题描述】：

当页面用 react-static 改变时，有没有办法滚动到顶部？我正在使用@reach/router，它默认包含在react-static中。

我已经试过了：

<Router onChange={window.scrollTo(0,0)}>
   <Routes path="*"/>
</Router>

ans 这个（来自这个issue）

<Router history={history} autoScrollToTop={true}>
   <Routes path="*"/>
</Router>

但两者都不起作用。

react-static 文档中提到了最后一个解决方案，但似乎已弃用，因为它不再在文档中。

【问题讨论】：

标签： javascript reactjs react-router react-static

【解决方案1】：

你需要新建一个组件Scrolltotop.js

import { useEffect } from 'react'
import { useLocation } from '@reach/router'

export default function Scrolltotop () {
  const { pathname } = useLocation()

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

  return null
}

并将其导入App.js

import Scrolltotop from './components/Scrolltotop'

并将其添加到 App 功能中：

function App () {
  return (
    <Root>
      <Scrolltotop/>
      <Router>
        <Routes path="*"/>
      </Router>
    </Root>
  )
}

【讨论】：

【解决方案2】：

尝试让一个组件为您处理滚动并位于您的应用组件之上。

用法：

import ManageScroll from './ManageScroll';
ReactDOM.render(<Fragment><ManageScroll/><App/></Fragment>, node);

ManageScroll.js：

import React from "react";
import { Location } from "@reach/router";

let scrollPositions = {};

class ManageScrollImpl extends React.Component {
  componentDidMount() {
    try {
      // session storage will throw for a few reasons
      // - user settings
      // - in-cognito/private browsing
      // - who knows...
      let storage = JSON.parse(sessionStorage.getItem("scrollPositions"));
      if (storage) {
        scrollPositions = JSON.parse(storage) || {};
        let { key } = this.props.location;
        if (scrollPositions[key]) {
          window.scrollTo(0, scrollPositions[key]);
        }
      }
    } catch (e) {}

    window.addEventListener("scroll", this.listener);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.listener);
  }

  componentDidUpdate() {
    const { key } = this.props.location;
    if (!scrollPositions[key]) {
      // never seen this location before
      window.scrollTo(0, 0);
    } else {
      // seen it
      window.scrollTo(0, scrollPositions[key]);
    }
  }

  listener = () => {
    scrollPositions[this.props.location.key] = window.scrollY;
    try {
      sessionStorage.setItem(
        "scrollPositions",
        JSON.stringify(scrollPositions)
      );
    } catch (e) {}
  };

  render() {
    return null;
  }
}

export default () => (
  <Location>
    {({ location }) => <ManageScrollImpl location={location} />}
  </Location>
);

查看此要点以获取更多信息https://gist.github.com/ryanflorence/39a37a85254159fd7a5ca54027e175dc

希望这会有所帮助！

【讨论】：

没有。从未使用过反应静态。但是，如果它在引擎盖下使用到达路由器，那么值得一试。这段代码毕竟来自到达路由器的作者。