React Router v6 页面跳转后滚动到顶部的实现方法

本文介绍了在使用 React Router v6 时，如何确保在页面路由切换后，页面能够自动滚动到顶部。通过使用 createMemoryRouter 和 <ScrollRestoration> 组件，可以轻松实现这一功能，提升用户体验。

在使用 React Router v6 构建单页应用（SPA）时，一个常见的需求是在页面跳转后自动滚动到页面顶部，以便用户能够立即看到新页面的内容。虽然 react-router-dom 提供了一些组件，但如果不正确使用，可能无法达到预期的效果。

要实现页面跳转后滚动到顶部的功能，需要使用 createMemoryRouter 来创建路由器，并配合 <ScrollRestoration> 组件。

以下是具体的步骤和代码示例：

1. 使用 createMemoryRouter 创建路由器：

   首先，你需要将 MemoryRouter 替换为 createMemoryRouter。同时，你需要使用 createRoutesFromElements 从 JSX 元素创建路由。

   import {
     Route,
     createMemoryRouter,
     createRoutesFromElements,
     RouterProvider,
   } from 'react-router-dom';
   
   const router = createMemoryRouter(
     createRoutesFromElements(
       <>
         <Route element={<Layout setTheme={setTheme} theme={theme} />}>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
           <Route path="/terms" element={<Terms />} />
           <Route path="/contact" element={<ContactUs />} />
           <Route path="/support" element={<Support />} />
         </Route>
         <Route element={<FullLayout setTheme={setTheme} theme={theme} />}>
           <Route path="/calculate" element={<Calculator />} />
         </Route>
       </>
     )
   );

2. 使用 RouterProvider：

   

   百灵大模型

   蚂蚁集团自研的多模态AI大模型系列

   下载

   将 <Router> 替换为 <RouterProvider router={router} />。

   function App() {
     // ...
     return (
       <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
         <RouterProvider router={router} />
       </ThemeProvider>
     );
   }

3. 添加 <ScrollRestoration> 组件（可选，但推荐）：

   <ScrollRestoration> 组件可以自动处理滚动位置的恢复。虽然 createMemoryRouter 已经包含了滚动到顶部的功能，但 <ScrollRestoration> 提供了更完整的滚动管理，例如在前进/后退时恢复滚动位置。 通常放在App.js中。

   import { ScrollRestoration } from "react-router-dom";
   
   function App() {
     // ...
     return (
       <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
         <RouterProvider router={router} />
         <ScrollRestoration />
       </ThemeProvider>
     );
   }

注意事项：

• 确保你已经安装了 react-router-dom v6 或更高版本。
• createMemoryRouter 适用于在内存中维护路由历史记录的场景，例如在测试环境或不需要持久化 URL 的应用中。在生产环境中，你可能需要使用 createBrowserRouter。
• 如果使用了自定义的滚动行为，可能需要覆盖默认的滚动恢复逻辑。

总结：

通过使用 createMemoryRouter 和 <ScrollRestoration> 组件，可以有效地解决 React Router v6 中页面跳转后滚动位置不正确的问题，从而提升用户体验。记住，根据你的应用场景选择合适的路由器类型，并根据需要自定义滚动行为。