如何在 React Location 中滚动到页面更改的顶部？答案

【问题标题】：How to Scroll to the top on page change in React Location?如何在 React Location 中滚动到页面更改的顶部？
【发布时间】：2022-12-31 08:41:53
【问题描述】：

如何像 React Router 一样制作 ScrollToTop 组件。

这是一个例子：

索引.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(() => {
    // "document.documentElement.scrollTo" is the magic for React Router Dom v6
    document.documentElement.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant", // Optional if you want to skip the scrolling animation
    });
  }, [pathname]);

  return null;
}

如何使用 React Location (Tanstack Router) 创建相同的位置？

【问题讨论】：

标签： react-location

【解决方案1】：

我们可以通过使用 TanStack 库中的 useLocation() 钩子来实现相同的行为，但道具会有所不同 - 而不是 pathname，它被称为 current。

这是代码ScrollToTop.js:

import {useEffect } from "react";
import {useLocation} from "@tanstack/react-location";

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

    useEffect(() => {
        document.documentElement.scrollTo({
            top: 0,
            left: 0,
            behavior: "instant", // Optional if you want to skip the scrolling animation
        });
    }, [current]);

    return null;
}

【讨论】：