React Router 6.15中使用createRoutesFromElements实现滚动恢复问题

先实现ScrollToTop组件 #

这个组件通过监听路由路径变化，触发页面滚动到顶部：

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

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

  useEffect(() => {
    // 支持平滑滚动可添加 { behavior: 'smooth' }
    window.scrollTo({ top: 0 });
  }, [pathname]);

  return null;
}

解决路由放置与useLocation报错问题 #

你遇到的两个问题核心是：ScrollToTop必须放在路由上下文内部，且不能直接作为Route的子元素。正确的做法是用一个全局布局组件包裹它和路由出口（Outlet）：

1. 创建全局根布局组件

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

function RootLayout() {
  return (
    <>
      <ScrollToTop />
      {/* Outlet会渲染所有子路由的内容 */}
      <Outlet />
    </>
  );
}

2. 在路由配置中使用根布局
   把根布局作为顶层Route的element属性值，所有子路由嵌套在这个顶层Route下：

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

// 配置路由
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<RootLayout />}>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      {/* 这里添加你的其他路由 */}
    </Route>
  )
);

// 在App中渲染路由
function App() {
  return <RouterProvider router={router} />;
}

export default App;

为什么这样能解决问题？ #

• 针对问题A：顶层Route的element是RootLayout，它的子元素都是<Route>，符合路由规则；ScrollToTop通过RootLayout嵌入到路由上下文里，不会触发"路由子组件必须是Route或Fragment"的错误。
• 针对问题B：RootLayout是路由配置的一部分，处于RouterProvider提供的路由上下文内部，所以ScrollToTop中的useLocation能正常获取路由信息，不会报错。

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