Question

我正在使用React构建一个投资组合网站，我希望模仿典型网站的行为。当我点击某个特定项目时，我被路由到一个新的URL，但是，滚动条的位置保持与“上一页”相同，除了第一次点击一个项目（如果我单击后退按钮并单击一个新项目，滚动条位于相同位置）。我希望每次点击项目时窗口都滚动到顶部。

class Project extends React.Component {
    render() {
        let project = this.props.project;
        let linkTo = "/work/" + project.id;

        return (
             <figure>
                <img src={project.thumbnail} />
                <figcaption>
                    <h3>{project.title}</h3>
                    <p>{project.type}</p>
                </figcaption>
                <Link to={linkTo} />
             </figure>
        )
    }
}

export default Project;

单击Project组件会将您路由到“work /：id”，这将呈现ProjectDetail组件。

class ProjectDetail extends React.Component {
    // componentDidMount() {
    //  window.scrollTo(0,0);
    // }

    // componentWillUpdate() {
    //  window.scrollTo(0,0);
    // }

    render() {
        // window.scrollTo(0,0);
        let project = PROJECTS.find((item) => item.id == this.props.params.id);
        return (
            <DetailMain project={project} />
        )
    }
}

export default ProjectDetail;

因此，每次渲染Project组件时，我都希望窗口滚动到顶部。你可以看到我一直在努力让滚动工作。

Answer 1

我能够使用此处提供的代码解决我的问题：https://github.com/rackt/react-router/issues/2144

var history = createBrowserHistory();

history.listen(location => {
  // Use setTimeout to make sure this runs after React Router's own listener
  setTimeout(() => {
    // Keep default behavior of restoring scroll position when user:
    // - clicked back button
    // - clicked on a link that programmatically calls `history.goBack()`
    // - manually changed the URL in the address bar (here we might want
    // to scroll to top, but we can't differentiate it from the others)
    if (location.action === 'POP') {
      return;
    }
    // In all other cases, scroll to top
    window.scrollTo(0, 0);
  });
});

var routes = (
  <Router history={history}>
    // ...
  </Router>
);

这似乎现在有效，直到在react-router中集成了某些内容。

Answer 2

您可以使用react-router或history执行此操作。

反应路由器

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  // routes
</Router>

找到here。

<强>记录

history.listen更改后，请{} {}使用location。

import { createHistory } from 'history';

let history = createHistory();

// Listen for changes to the current location. The
// listener is called once immediately.
let unlisten = history.listen(function(location) {
  console.log(location.pathname);
  // scroll logic here
})

// When you're finished, stop the listener.
unlisten();

有关here的更多信息。

React：window.scrollTo（0,0）在组件呈现每个时间

2 个答案: