如何在ReactJS中阻止页面自动滚动？移动端跳转下移问题求助

嘿，作为曾经踩过类似移动端路由滚动坑的React开发者，给你几个实用的解决方案，应该能解决你的问题：

因为你的代码是类组件，你可以在跳转到的目标页面（比如首页组件）的生命周期钩子中添加滚动逻辑，确保页面加载后自动回到顶部：

componentDidMount() {
  // 直接滚动到顶部
  window.scrollTo(0, 0);
  // 如果想要平滑滚动效果，可以用下面的写法
  // window.scrollTo({
  //   top: 0,
  //   behavior: 'smooth'
  // });
}

// 如果页面可能通过路由参数变化重新渲染，也可以加上这个钩子
componentDidUpdate(prevProps) {
  if (this.props.location.pathname !== prevProps.location.pathname) {
    window.scrollTo(0, 0);
  }
}

注意：类组件需要获取location props，你可以用withRouter高阶组件包裹你的目标组件来实现，比如：

import { withRouter } from 'react-router-dom';

class Home extends React.Component {
  // ... 你的组件代码
}

export default withRouter(Home);

如果你的React Router版本是v6及以上，官方提供了专门处理滚动恢复的组件，直接在路由根组件里添加就行，它会自动在跳转新路由时滚动到顶部，返回历史记录时恢复之前的位置，非常适配移动端：

import { ScrollRestoration } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      {/* 你的路由配置 */}
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 其他路由 */}
      </Routes>
      {/* 添加这个组件，放在路由外面 */}
      <ScrollRestoration />
    </div>
  );
}

如果想快速针对这个移动端Logo的Link做处理，可以给Link添加onClick事件，在跳转后触发滚动：

<div className="Header__logo--mobile hidden-on-desktop">
  <Link 
    to="/"
    onClick={() => {
      // 用setTimeout确保路由跳转完成后再执行滚动
      setTimeout(() => {
        window.scrollTo(0, 0);
      }, 100);
    }}
  >
    <img src={HomeLogoImage} ref={div => (this.imageMobile = div)} />
    <img className="Header__logo--glitch" src={HomeLogoImageGlitch} ref={div => (this.imageGlitchMobile = div)} />
  </Link>
</div>

另外说一下，你之前尝试的tabindex=-1是用来控制元素焦点的，和页面滚动位置没有关系，所以这个方法解决不了问题哦。

内容的提问来源于stack exchange，提问作者Prasanna Kumar S R