正确使用此代码：

import { RouterProvider, createBrowserRouter, ScrollRestoration } from 'react-router-dom';
import {
  Courses,
  Error,
  Home,
  HomeLayout,
  Login,
  Register,
  Testing,
  Course,
  Contact,
  About,
  FAQ,
  Events,
  EventDetails,
  Library,
  Admin,
} from '@/pages';

const router = createBrowserRouter([
  // Your route configuration here
]);

const App = () => {
  return (
    <RouterProvider router={router}>
      {/* Wrap your RouterProvider with ScrollRestoration */}
      <ScrollRestoration onBeforeRestore={() => window.scrollTo(0, 0)}>
        <div>
          {/* Your other components */}
        </div>
      </ScrollRestoration>
    </RouterProvider>
  );
};

export default App;

从'react-router-dom'导入ScrollRestoration，并使用ScrollRestoration组件 Package RouterProvider组件，并设置onBeforeRestore回调以滚动到页面顶部。在这个例子中，window.scrollTo（0，0）用于滚动到顶部，之后当您导航到新路由时，页面将自动滚动到顶部。

ScrollRestoration组件也只适用于数据路由器，因此您必须使用使用createBrowserRouter、createMemoryRouter等创建的路由器之一。
关于docs：

重要信息

此功能仅在使用数据路由器时有效，请参阅Picking a Router
您应该只呈现其中一个，建议您在应用的根路由中呈现它
创建一个布局路由组件，以呈现为根路由元素，该元素呈现嵌套路由的ScrollRestoration * 和Outlet *。
范例：

import { RouterProvider, createBrowserRouter, Outlet } from 'react-router-dom'
...

const AppLayout = () => (
  <>
    <ScrollRestoration />
    <Outlet />
  </>
);

const router = createBrowserRouter([
  {
    element: <AppLayout />,
    children: [
      {
        path: '/',
        element: <HomeLayout />,
        errorElement: <Error />,
        children: [
          { index: true, element: <Home /> },
          { path: 'courses', element: <Courses /> },
          { path: 'single-course', element: <Course /> },
          { path: 'testing', element: <Testing /> },
          { path: 'contact', element: <Contact /> },
          { path: 'about-us', element: <About /> },
          { path: 'faq', element: <FAQ /> },
          { path: 'events', element: <Events /> },
          { path: 'event-details', element: <EventDetails /> },
          { path: 'library', element: <Library /> },
        ],
      },
      { path: '/login', element: <Login /> },
      { path: '/register', element: <Register /> },
      { path: '/admin', element: <Admin /> },
    ]
  },
]);

const App = () => {
  return <RouterProvider router={router} />
};

export default App;