React Router DOM v6：RouterProvider下如何嵌入ScrollToTop组件？

因为RouterProvider不接收子组件，你需要把ScrollToTop组件嵌入到路由配置的元素层级中，而不是作为RouterProvider的子节点。以下是几种可行方案：

方案一：使用布局路由包裹所有路由 #

这是最通用的方式，通过全局布局组件将ScrollToTop注入到所有路由的渲染上下文里：

1. 实现ScrollToTop组件（注意v6中用useLocation代替useHistory监听路径变化）

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    // 滚动到顶部，可选择平滑滚动
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [pathname]);

  return null;
}

2. 创建全局根布局组件，包含ScrollToTop和Outlet（用于渲染子路由）

import { Outlet } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';

function RootLayout() {
  return (
    <>
      <ScrollToTop />
      <Outlet />
    </>
  );
}

3. 在createBrowserRouter配置中，将根路由的element设置为RootLayout，所有业务路由作为其子路由

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import RootLayout from './RootLayout';
import Home from './pages/Home';
import About from './pages/About';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: '/', element: <Home /> },
      { path: '/about', element: <About /> },
      // 其他业务路由...
    ]
  }
]);

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

export default App;

方案二：直接在根路由元素中嵌入ScrollToTop #

如果不需要独立的布局组件，可以简化写法，直接将ScrollToTop和Outlet写在根路由的element中：

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <>
        <ScrollToTop />
        <Outlet />
      </>
    ),
    children: [
      // 子路由配置...
    ]
  }
]);

方案三：利用路由导航钩子实现（无需组件） #

如果不想通过组件方式实现，可以直接修改路由的导航行为：

const router = createBrowserRouter([/* 路由配置 */]);

// 重写navigate方法，导航后自动滚动到顶部
const originalNavigate = router.navigate;
router.navigate = (...args) => {
  const result = originalNavigate(...args);
  window.scrollTo({ top: 0, behavior: 'smooth' });
  return result;
};

原理说明 #

以上方案的核心是让ScrollToTop处于路由上下文范围内（能访问到useLocation），当路径变化时触发滚动逻辑。布局路由的方式更符合React Router v6的设计理念，也便于后续扩展全局布局逻辑。

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