React Router 3.x：已进入路由后路径变化仍触发onEnter的问题

这是React Router早期版本（比如v3）的一个常见行为——onEnter钩子会在每次路由匹配成功时触发，哪怕只是同一个Route下的可选参数发生变化，因为这些参数变化仍然会让这条Route规则匹配上当前路径，所以onEnter会再次执行，这和你预期的"仅首次进入路由时触发"不符。

下面给你几个可行的解决方案：

方案1：在scrollToTop内判断是否为同路由参数变化 #

我们可以在scrollToTop函数里，对比当前路由的基础路径（也就是不包含后续可选参数的部分）和上一次的路径，如果是同一个基础路径，就不执行滚动操作：

// 保存上一次的基础路由路径
let lastBasePath = '';

function scrollToTop(nextState) {
  // 提取基础路径：比如从/users/123/projectA/photo1/title中得到/users/123
  const currentBasePath = nextState.location.pathname.split('/').slice(0, 3).join('/');
  
  if (currentBasePath !== lastBasePath) {
    window.scrollTo(0, 0);
    lastBasePath = currentBasePath;
  }
}

这个方法的核心是只在基础路由（/users/:accountId）变化时才滚动，同一个用户下的可选参数变更不会触发滚动。

方案2：把滚动逻辑移到组件生命周期中 #

既然onEnter会在参数变化时触发，我们可以把滚动逻辑放到Profile组件内部，利用生命周期钩子控制触发时机：

class Profile extends React.Component {
  componentDidMount() {
    // 首次挂载组件时，滚动到顶部
    window.scrollTo(0, 0);
  }

  componentWillReceiveProps(nextProps) {
    // 只有当accountId变化（切换到不同用户）时，才滚动到顶部
    if (nextProps.params.accountId !== this.props.params.accountId) {
      window.scrollTo(0, 0);
    }
  }

  // ...组件其他代码
}

这样，同一个用户下切换可选参数时，因为accountId没有变化，就不会执行滚动操作，完全符合你的预期。

方案3：升级到React Router v4+（推荐） #

如果你的项目可以升级，React Router v4及以上版本已经移除了onEnter这类路由钩子，转而推荐在组件内使用useEffect（函数组件）或生命周期来处理这类逻辑。比如用函数组件的话：

import { useParams, useEffect } from 'react-router-dom';

function Profile() {
  const { accountId } = useParams();

  // 只有当accountId变化时，才执行滚动
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [accountId]);

  // ...组件其他代码
}

这种方式更符合React的组件化思想，也能精准控制滚动的触发时机。

内容的提问来源于stack exchange，提问作者connected_user