React-Router 中页面导航如何自动滚动到顶部？

React-Router 中页面导航自动滚动到顶部的解决方案

问题

在使用 React-Router 时，当导航到新页面时，页面滚动位置可能会保持不变，导致用户在访问新内容时难以找到所需信息。

解决方案

解决这个问题有几种方法：

1. 使用 window.scrollTo()

在 componentDidMount 生命周期函数中，可以使用 window.scrollTo(0, 0) 方法在路由切换时将页面滚动到顶部。代码示例如下：

import { useEffect, useHistory } from "react";

const ScrollToTop = () => {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });

    return () => {
      unlisten();
    };
  }, [history]);

  return null;
};

export default ScrollToTop;

2. 使用 scrollBehavior

React-Router 提供了 scrollBehavior 选项，允许自定义页面导航时的滚动行为。可以通过返回一个指定滚动位置的对象来实现。代码示例如下：

import { Router, createBrowserHistory } from "react-router-dom";

const history = createBrowserHistory();

const App = () => {
  return (
    <Router history={history} scrollBehavior={() => ({ top: 0 })}>
      {/* ... */}
    </Router>
  );
};

export default App;

3. 使用 useLayoutEffect

useLayoutEffect 钩子允许在组件渲染后立即执行副作用。它确保了即使其他更新中断了 componentDidMount 中的滚动操作，页面也会在路由切换时滚动到顶部。代码示例如下：

import { useEffect, useLayoutEffect, useHistory } from "react";

const ScrollToTop = () => {
  const history = useHistory();

  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [history]);

  return null;
};

export default ScrollToTop;

总结

使用以上方法中的任何一种，都可以解决在 React-Router 中导航到新页面时不自动滚动到顶部的常见问题。这将大大改善用户体验，确保他们始终能够轻松找到所需内容。

常见问题解答

• 为什么需要滚动到顶部？

  • 导航到新页面时，确保用户可以从页面顶部开始阅读或查看内容。

• 为什么滚动到顶部不适用于所有页面？

  • 某些页面可能使用无限滚动或其他自定义滚动行为，不适用于自动滚动到顶部。

• 如何禁用自动滚动到顶部？

  • 可以通过从 scrollBehavior 函数返回 undefined 或将 window.scrollTo() 设为 noop 来禁用自动滚动到顶部。

• 滚动到顶部有什么缺点吗？

  • 如果页面内容很长，滚动到顶部可能会导致页面加载时间变长或导致页面闪烁。

• 如何解决滚动到顶部导致页面闪烁的问题？

  • 使用 setTimeout 或 requestAnimationFrame 在页面加载完成后滚动到顶部。