代码之家 › 专栏 › 技术社区 › saimarshadd

React router dom中的路由更改时滚动到顶部

react-router-dom react-router routes reactjs javascript

0

saimarshadd · 技术社区 · 2 年前

我正在使用 [email protected] 而我正面临一个问题。路由工作正常,但当我在页面中间,点击导航栏中的任何链接或任何其他链接以路由到另一个页面时,下一个页面将从中心打开,而不是从顶部打开。经过一番挖掘,我发现 ScrollRestoration 组件来自 react-router-dom 可以用来滚动到顶部,而不是传统的 useEffect 滚动到顶部解决方案。但在他们给出的例子中,我不明白如何在内部使用它 createBrowserRouter 。

以下是我的app.js文件中的代码:

import { RouterProvider, createBrowserRouter } 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([
  {
    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

1 回复 | 直到 2 年前

1

Drew Reese 2 年前

这个 ScrollRestoration 组件也只适用于数据路由器,所以您有使用使用创建的路由器之一 createBrowserRouter , createMemoryRouter 等

来自 docs :

重要的

此功能仅在使用数据路由器时有效,请参阅 Picking a Router

您应该只渲染其中一个,建议您渲染它在应用程序的根路径中

创建布局管线组件以渲染为渲染的根管线元素 滚动恢复 和一 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;

2

0

Ø§ÙØ±ØÙÙ Ø§ÙØ±ØÛÙ 2 年前

正确使用此代码工作:

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”导入ScrollRestocration,并用ScrollRestoration组件包装RouterProvider组件,然后查看onBeforeRestore回调滚动到页面顶部。在本例中,window.sollTo(0,0)用于滚动到顶部,之后当您导航到新路线时,页面将自动滚动到顶部。