解决 React 项目中路由跳转后页面无法滚动的问题-JavaScript中文网-JavaScript教程资源分享门户

在使用 React 开发项目时，我们经常会使用路由来实现页面之间的切换。然而，在某些情况下，当我们切换到新页面后，页面无法滚动，这对用户体验有着不小的影响。本文将介绍如何解决这一问题。

问题分析

这个问题的原因是在使用路由跳转后，页面的滚动位置并没有被保存下来，因此会出现无法滚动的现象。为了解决这个问题，我们需要在路由切换前，保存当前页面的滚动位置，并在切换到新页面后将滚动位置还原。

解决方案

在 React 中，我们可以通过 react-router 组件的生命周期钩子函数实现滚动位置的保存和还原。

保存滚动位置

当用户从一个页面切换到另一个页面时，我们可以使用 componentDidUpdate 钩子函数来保存当前页面的滚动位置。代码如下：

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

在这段代码中，我们使用了 window.scrollTo(0, 0) 方法来将滚动位置重置为页面顶部。该方法接受两个参数，第一个参数是滚动位置的 x 坐标，第二个参数是滚动位置的 y 坐标。这里我们将 y 坐标重置为 0，即页面顶部。

还原滚动位置

当用户从一个页面返回到之前的页面时，我们可以使用 componentDidMount 钩子函数来还原之前保存的滚动位置。代码如下：

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  componentDidMount() {
    window.scrollTo(0, this.props.scrollY);
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

在这段代码中，我们使用了 window.scrollTo(0, this.props.scrollY) 方法来将滚动位置还原。这里我们将 y 坐标设置为之前保存的位置，即 this.props.scrollY。

完整代码

为了更好地演示如何实现滚动位置的保存和还原，我们编写了一个完整的示例代码。代码如下：

// javascriptcn.com 代码示例
import { Switch, Route, useLocation } from "react-router-dom";
import { useState, useEffect } from "react";

function ScrollToTop() {
  const { pathname } = useLocation();
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    setScrollY(window.scrollY);
  }, [pathname]);

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

  return null;
}

function App() {
  return (
    <div>
      <ScrollToTop />

      <Switch>
        <Route exact path="/">
          <h1>Home</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
            bibendum sem in venenatis aliquet. Etiam ut velit vitae metus
            feugiat tempus. Praesent nec nunc justo.
          </p>
        </Route>
        <Route path="/about">
          <h1>About</h1>
          <p>
            Sed eget enim sit amet nunc interdum malesuada. Proin eget nisl ac
            arcu placerat vehicula eu vitae massa. Sed id aliquet turpis, ac
            ullamcorper risus. Duis fermentum nunc diam, a ultricies dolor
            convallis id. Fusce lobortis dui at mollis faucibus.
          </p>
        </Route>
        <Route path="/contact">
          <h1>Contact</h1>
          <p>
            Vestibulum condimentum consequat lorem nec feugiat. Suspendisse
            ac egestas magna. Vestibulum a tortor quis ex molestie scelerisque
            id id tellus.
          </p>
        </Route>
      </Switch>
    </div>
  );
}

export default App;

在这段代码中，我们使用了 react-router-dom 中的 Switch 和 Route 组件来创建路由。在 <Switch> 组件内，我们定义了三个路由分别对应不同的页面。我们还定义了一个 ScrollToTop 组件，该组件包含了上文提到的保存和还原滚动位置需要的代码。

总结

通过本文的介绍，我们了解了在 React 项目中解决路由跳转后页面无法滚动的问题的方法。我们可以通过保存和还原滚动位置来解决这一问题，具体实现中使用了 react-router 组件的生命周期钩子函数和 window.scrollTo 方法。希望本文能够为大家提供帮助，并在实际项目开发中得到应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652134ed95b1f8cacd8b4d19