如何在React Location（Tanstack Router）中实现页面切换滚动到顶部？

需求背景 #

我希望实现类似React Router中的ScrollToTop组件，在页面切换时将页面视图滚动到顶部。以下是React Router中的实现示例：

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import ScrollToTop from "./ScrollToTop"
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ScrollToTop/>
    <RouterProvider router={router} />
  </React.StrictMode>
);

ScrollToTop.js

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    // React Router Dom v6的核心滚动逻辑
    document.documentElement.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant", // 可选，设置为'smooth'可开启平滑滚动
    });
  }, [pathname]);

  return null;
}

请问如何使用React Location（Tanstack Router）实现相同的页面切换滚动到顶部功能？

TanStack Router实现方案 #

在TanStack Router中，可通过useRouter钩子监听路由变化事件，实现滚动到顶部的逻辑，具体步骤如下：

1. 创建ScrollToTop组件

import { useEffect } from "react";
import { useRouter } from "@tanstack/react-router";

export default function ScrollToTop() {
  const router = useRouter();

  useEffect(() => {
    // 监听路由切换成功事件
    const unlisten = router.listen({
      locationChangeSuccess: () => {
        document.documentElement.scrollTo({
          top: 0,
          left: 0,
          behavior: "instant", // 可选，平滑滚动改为'smooth'
        });
      },
    });

    // 组件卸载时取消监听
    return unlisten;
  }, [router]);

  return null;
}

2. 在入口文件中引入使用

将ScrollToTop放置在RouterProvider的上下文范围内即可：

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import ScrollToTop from "./ScrollToTop";
import "./index.css";

// 定义路由结构
const router = createRouter({
  routeTree: {
    path: "/",
    component: () => <div>Hello world!</div>,
  },
});

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router}>
      <ScrollToTop />
    </RouterProvider>
  </React.StrictMode>
);

补充说明 #

• TanStack Router的router.listen可以精准监听路由切换成功的事件，避免路由跳转过程中触发无效滚动。
• 如果需要针对特定路由禁用滚动到顶部，可在locationChangeSuccess回调中判断当前路由的pathname，再决定是否执行滚动逻辑。

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