正文

如何让React Router 4实现滚动位置恢复，轻松应对页面跳转后的滚动回退问题

/0 浏览量
0624

在React应用中，使用React Router进行页面跳转是很常见的操作。但有时候，页面跳转后，用户希望回到之前浏览的位置，而不是页面顶部。本文将介绍如何在React Router 4中实现滚动位置恢复，轻松应对页面跳转后的滚动回退问题。

1. 使用react-router-dom的ScrollPosition高阶组件

react-router-dom库提供了一个名为ScrollPosition的高阶组件，可以帮助我们实现滚动位置恢复的功能。下面是使用ScrollPosition的简单示例：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import ScrollPosition from 'react-router-scroll-position';

const MyComponent = ({ match, location, history }) => {
  // 组件逻辑...
};

export default () => (
  <ScrollPosition>
    <Route
      path="/some-path"
      component={MyComponent}
      exact
    />
  </ScrollPosition>
);

在这个例子中，ScrollPosition高阶组件会自动处理滚动位置的恢复。当用户在/some-path页面滚动后，跳转到其他页面再回到/some-path时，滚动位置会自动恢复。

2. 自定义滚动位置恢复逻辑

如果ScrollPosition组件不能满足你的需求，你可以自定义滚动位置恢复逻辑。以下是一个简单的实现方式：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const MyComponent = ({ match, location, history }) => {
  // 组件逻辑...

  React.useEffect(() => {
    const { pathname } = location;
    const savedPosition = sessionStorage.getItem(pathname);

    if (savedPosition) {
      window.scrollTo(0, parseInt(savedPosition, 10));
    }

    return () => {
      sessionStorage.removeItem(pathname);
    };
  }, [location]);

  return <div>...</div>;
};

export default () => (
  <Route
    path="/some-path"
    component={MyComponent}
    exact
  />
);

在这个例子中，我们使用sessionStorage来存储滚动位置。当用户在/some-path页面滚动后，我们将滚动位置存储在sessionStorage中。当用户跳转到其他页面再回到/some-path时，我们从sessionStorage中读取滚动位置，并将其应用到页面上。

3. 注意事项

  • 在使用自定义滚动位置恢复逻辑时，请确保在组件卸载时清除存储的滚动位置，以避免内存泄漏。
  • 如果你的应用使用了<Switch>组件来处理路由，请确保在<Switch>中使用ScrollPosition或自定义逻辑。

通过以上方法，你可以在React Router 4中实现滚动位置恢复，轻松应对页面跳转后的滚动回退问题。希望这篇文章对你有所帮助！

-- 展开阅读全文 --