Remix路由切换时如何保持滚动位置在顶部？

方案1：在目标路由组件中手动重置滚动 #

直接在/products路由的组件里，通过useEffect在挂载时强制滚动到顶部：

import { useEffect } from "react";

export default function Products() {
  useEffect(() => {
    window.scrollTo(0, 0);
    // 如需平滑滚动可替换为：window.scrollTo({ top: 0, behavior: "smooth" });
  }, []);

  return (
    // 产品页面内容
  );
}

方案2：封装自定义Link组件统一处理 #

创建全局自定义Link组件，替代Remix原生Link，每次点击时触发滚动：

import { Link as RemixLink, LinkProps } from "@remix-run/react";

export default function Link(props: LinkProps) {
  const handleClick = () => {
    window.scrollTo(0, 0);
  };

  return <RemixLink {...props} onClick={handleClick} />;
}

后续项目内所有跳转都使用这个自定义Link，避免重复编写滚动逻辑。

方案3：结合Loader与路由导航监听实现 #

通过路由的Loader设置自定义响应头，再在root组件中监听路由变化执行滚动：

1. 在/products路由的Loader中添加响应头：

export async function loader() {
  return new Response(null, {
    headers: { "X-Scroll-To-Top": "true" },
  });
}

2. 在root组件中监听导航状态：

import { useNavigation } from "@remix-run/react";
import { useEffect } from "react";

export default function App() {
  const navigation = useNavigation();

  useEffect(() => {
    if (navigation.state === "loaded") {
      const scrollHeader = navigation.responseHeaders.get("X-Scroll-To-Top");
      if (scrollHeader === "true") {
        window.scrollTo(0, 0);
      }
    }
  }, [navigation.state, navigation.responseHeaders]);

  return (
    <body>
      <Nav />
      <Outlet />
      <Scripts />
      <LiveReload />
      <Footer />
    </body>
  );
}

方案4：检查自定义滚动容器 #

如果页面的滚动容器不是window（比如body/html被设置overflow: hidden，滚动在内部元素上），需要找到实际滚动容器再执行滚动：

useEffect(() => {
  // 假设滚动容器id为main-content
  const container = document.getElementById("main-content");
  if (container) {
    container.scrollTop = 0;
  }
}, []);

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