React Router Dom v6.3.0路由导航滚动位置异常问题求助

问题原因 #

React Router v6 默认不会在导航至新页面时自动将浏览器滚动位置重置到顶部，所以当你在首页滚动到某个位置后跳转其他页面，目标页面会继承之前的滚动位置，从底部开始渲染。

解决方案 #

方法一：全局滚动恢复组件 #

创建一个监听路由变化的组件，每次路径切换时自动滚动到页面顶部：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    // 滚动到页面顶部，可选添加平滑滚动效果
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }, [pathname]);

  return null;
};

export default ScrollToTop;

将这个组件添加到路由根组件（routes.tsx）的BrowserRouter内部即可：

const App: React.FC = () => (
  <BrowserRouter>
    <ScrollToTop /> {/* 新增全局滚动恢复组件 */}
    <Layout className="layout">
      <div style={{ marginBottom: "64px" }}>
        <Header>
          <AppHeader />
        </Header>
      </div>
      <Content>
        <div className="site-layout-content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/offers" element={<Login />} />
            <Route path="/aboutUs" element={<AboutUs />} />
            <Route path="/contactUs" element={<ContactUs />} />
            <Route path="/placeDetails/:id" element={<PlaceDetails />} />
            <Route path="/advantages" element={<Advantages />} />
          </Routes>
        </div>
      </Content>
      <Footer style={{ textAlign: "center" }}>
        <AppFooter />
      </Footer>
    </Layout>
  </BrowserRouter>
);
export default App;

方法二：手动在导航时触发滚动（不推荐） #

如果不想全局处理，也可以在每个navigate调用后手动添加滚动逻辑，但这种方式重复代码较多，仅适合特殊场景：

// header.tsx 中修改导航逻辑
<span onClick={() => {
  navigate("/offers");
  window.scrollTo(0, 0);
}}>{strings.header.offers}</span>

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