Question

我正在使用此解决方案恢复页面更改滚动：

ReactDOM.render(
  <Router>
    <ScrollToTop>
      <div className="App">
        <Header />
        <Main />
        <Footer />
      </div>
    </ScrollToTop>
  </Router>,
  document.getElementById('root')
);

这是我的ScrollToTop组件：

import React, { Component } from 'react';
import {withRouter} from 'react-router';

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)

除锚链接外，此工作正常;实际上，它会覆盖锚链接的行为，我无法滚动到页面的所需部分。我知道我可以创建一个容器并在我想要使用它的页面中使用它;但是，我仍然会遇到同样的问题，因为导航到同一页面可能会触发不同的行为（有时会将窗口滚动到顶部，有时会滚动到锚点链接）。在任何一种情况下都有办法保持所需的行为吗？

Answer 1

您可以检查window.location.hash属性以查看您是否正在访问锚链接，如果不是，则滚动到顶部。您的代码看起来像这样：

import React, { Component } from 'react';
import {withRouter} from 'react-router';

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    const hasLocationChanged = this.props.location !== prevProps.location;
    const urlHasHash = window.location.hash !== '';

    if (hasLocationChanged && !urlHasHash) {
      window.scrollTo(0, 0);
    }
  }

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

export default withRouter(ScrollToTop);

react-router 4 scroll恢复可以防止锚链接的本机行为

1 个答案: