滚动恢复到顶部的导航更改

Question

我在使用react路由器导航时遇到滚动问题。

当我导航到另一个组件时，它会保持上次导航时的滚动位置。然而，我希望它恢复和开始从顶部每当导航被改变。

 class App extends Component{
  render() {
   return(
    <BrowserRouter onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
      <div style={{display: 'flex'}}>
        <div className='navBar'>
          <ul style={{listStyleType: 'none'}}>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/towns'>Towns</Link></li>
            <li><Link to='/pubs'>Pubs</Link></li>
            <li><Link to='/venues'>Venues</Link></li>
            <li><Link to='/cinemas'>Cinemas</Link></li>

          </ul>
        </div>

        <div style={{flex:1, padding:'0px'}}>
          {routes.map((route) => (
            <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.main}
              />
            ))}
          </div>
        </div>
      </BrowserRouter>
     )
   }
 }

然而，它不起作用。我有一种感觉，问题在于我的导航风格，而不是window.scrollTo（）片段。

Answer 1

我使用React钩子的解决方案

import { useEffect, useRef } from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';

const ScrollIntoView = ({ children, location }) => {
  const prevLocation = useRef();

  useEffect(() => {
    if (prevLocation.current !== location.pathname) {
      window.scrollTo(0, 0);
      prevLocation.current = location.pathname;
    }
  }, [location]);

  return children;
};

ScrollIntoView.propTypes = {
  children: PropTypes.node,
  location: PropTypes.object
};

export default withRouter(ScrollIntoView);

Answer 2

据我所知，由于react-router v4，Browser路由器没有onUpdate函数。

实现它的几种方法。这将是最简单的...

工作示例：https://codesandbox.io/s/7mr12q2wz6（向下滚动页面并单击链接）

组件/ScrollIntoView.js

import { PureComponent } from "react";
import { withRouter } from "react-router-dom";

class ScrollIntoView extends PureComponent {
  componentDidMount = () => window.scrollTo(0, 0);

  componentDidUpdate = prevProps => {
    if (this.props.location !== prevProps.location) window.scrollTo(0, 0);
  };

  render = () => this.props.children;
}

export default withRouter(ScrollIntoView);

路线/索引。js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Links from "../components/Links";
import Home from "../components/Home";
import About from "../components/About";
import Contact from "../components/Contact";
import ScrollIntoView from "../components/ScrollIntoView";

export default () => (
  <BrowserRouter>
    <div>
      <ScrollIntoView>
        <Links />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
        <Links />
      </ScrollIntoView>
    </div>
  </BrowserRouter>
);

或者您可以在这里找到另一种方法：在react中渲染后滚动到页面顶部。js