React Router DOM v6中ScrollRestoration失效问题及解决方法

问题描述 #

我已按照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中添加了<ScrollRestoration>但未生效：

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

目前使用scrollToTop方案，但认为这并非最优实现，想知道哪里操作有误，以及如何实现路由切换时的滚动恢复。

问题原因及解决方法 #

1. <ScrollRestoration> 放置位置错误 #

<RouterProvider> 仅接受 router 属性，不会渲染它的子节点。你把 <ScrollRestoration> 放在 <RouterProvider> 内部作为子元素，它根本不会被渲染到页面中，自然无法生效。

正确做法是将 <ScrollRestoration> 放到根路由组件 <Base /> 中，确保它处于路由渲染的元素树内部：

// Base.jsx
import { Outlet, ScrollRestoration } from 'react-router-dom';

export default function Base() {
  return (
    <div className="base-container">
      {/* 这里是Base组件的固定内容，比如导航栏、页脚等 */}
      <Outlet /> {/* 渲染子路由内容 */}
      <ScrollRestoration /> {/* 放在路由内容的同级位置 */}
    </div>
  );
}

2. 路由配置的 index 属性类型错误 #

你配置的 index: 'true' 是字符串类型，React Router 要求 index 必须是布尔值，虽然这个错误不会直接导致滚动恢复失效，但会影响路由匹配的正确性，建议修正：

export const router = createBrowserRouter([
    {
        path: '/',
        element: <Base />,
        children: [
            {
                index: true, // 改为布尔值
                element: <Home />
            },
            // 其他路由保持不变
        ]
    }
])

3. 滚动恢复的额外说明 #

• 修正后，<ScrollRestoration> 会自动处理两种场景：导航到新路由时滚动到顶部，返回上一页时恢复之前的滚动位置，完全替代手动的 scrollToTop 方案。
• 如果需要自定义滚动行为，可以给 <ScrollRestoration> 传入 getKey 属性，指定哪些路由需要保持滚动位置，或者通过 shouldRestoreScroll 自定义恢复逻辑。

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