如何在 React Router DOM v6 上使用 ScrollRestoration

Question

我已经按照 RRDv6 文档中的建议创建了路由器：

export const router = createBrowserRouter([
    {
        path: '/',
        element: <Base />,
        children: [
            {
                index: 'true',
                element: <Home />
            },
            {
                path: 'about',
                element: <About/>
            },
            {
                path: 'contato',
                element: <Contact />
            },
            {
                path: '*',
                element: <Error404 />
            }
        ]
    }
])

在 App.jsx 中，我放置了 ，但它不起作用：

export default function App() {
    return (
        <DataProvider>
            <RouterProvider router={router}>
                <ScrollRestoration />
            </RouterProvider>
        </DataProvider>
    )
}

我做错了什么？更改路线时如何恢复滚动。

OBS.：目前我正在使用

scrollToTop

，但我认为这不是更好的实现。

Answer 1

RouterProvider

不消耗任何

children

道具：

declare function RouterProvider(
  props: RouterProviderProps
): React.ReactElement;

interface RouterProviderProps {
  fallbackElement?: React.ReactNode;
  router: Router;
  future?: Partial<FutureConfig>;
}

ScrollRestoration

组件应在路由器内渲染，靠近根。

我建议将其渲染为根布局路由组件的一部分，

Base

。

示例：

import { Outlet, ScrollRestoration } from 'react-router-dom';

const Base = () => {
  ...

  return (
    <>
      ...
      <Outlet />
      ...
      <ScrollRestoration />
    </>
  );
};

export const router = createBrowserRouter([
  {
    path: '/',
    element: <Base />, // <-- renders scroll restoration
    children: [
      ....
    ]
  }
])

export default function App() {
  return (
    <DataProvider>
      <RouterProvider router={router} />
    </DataProvider>
  );
}