React Router v6 页面跳转后自动滚动到顶部

本教程旨在解决在使用 React Router v6 进行页面跳转时，页面未能自动滚动到顶部的问题。我们将介绍如何利用 createMemoryRouter 和 <ScrollRestoration> 组件，确保每次路由切换后，用户都能从页面顶部开始浏览，从而提升用户体验。

在 React 应用中使用 React Router v6 进行路由管理时，一个常见的需求是：当用户从一个页面滚动到某个位置，然后导航到另一个页面时，希望新页面自动滚动到顶部。这能提供更好的用户体验，避免用户在新页面仍然看到之前滚动到的位置。

要实现这个功能，关键在于使用 React Router 提供的 createMemoryRouter 和 <ScrollRestoration> 组件。

使用 createMemoryRouter

createMemoryRouter 是 React Router v6 中用于创建基于内存的路由器的函数。与传统的 BrowserRouter 不同，createMemoryRouter 更适合在没有真实 URL 环境中使用，例如测试环境或某些特定的应用场景。更重要的是，它与 <ScrollRestoration> 组件配合使用，能够实现页面滚动位置的自动管理。

使用 <ScrollRestoration> 组件

<ScrollRestoration> 是一个 React Router v6 提供的组件，用于在页面之间导航时自动管理滚动位置。它会自动保存用户在页面上的滚动位置，并在返回该页面时恢复到之前的位置。同时，它也能确保在新的页面加载时，滚动到顶部。

实现步骤

ProcessOn

免费在线流程图思维导图，专业强大的作图工具，支持多人实时在线协作

下载

1. 安装 React Router DOM:

   如果你的项目中还没有安装 React Router DOM，首先需要安装它。

   npm install react-router-dom

2. 修改 App.js 文件:

   将 MemoryRouter 替换为 createMemoryRouter，并使用 RouterProvider 组件。同时，确保你的路由配置使用 createRoutesFromElements 函数。

   import {
       Route,
       createMemoryRouter,
       createRoutesFromElements,
       RouterProvider
   } from 'react-router-dom';
   import { useState } from "react";
   import { createTheme, ThemeProvider } from "@mui/material";
   import { Home, Support, About, ContactUs, Terms, Calculator } from "./views";
   import './styles/global.css';
   import themes from "./utils/ThemeUtils";
   import Layout from "./components/Layout";
   import FullLayout from "./components/FullLayout";
   
   function App() {
       const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");
       const lightTheme = createTheme(themes.lightTheme);
       const darkTheme = createTheme(themes.darkTheme);
   
       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>
               </>
           )
       );
   
       return (
           <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
               <RouterProvider router={router} />
           </ThemeProvider>
       );
   }
   
   export default App;

注意事项

• 确保你的 React Router DOM 版本在 v6 或以上。
• createMemoryRouter 适用于没有真实 URL 环境的应用。如果你的应用需要在浏览器地址栏中显示 URL，请使用 createBrowserRouter。
• 如果使用了懒加载组件，可能需要在懒加载组件加载完成后再进行滚动，可以使用 useEffect 监听组件加载状态。

总结

通过使用 createMemoryRouter 和 <ScrollRestoration> 组件，可以轻松实现 React Router v6 应用中页面跳转后自动滚动到顶部的功能。这能显著提升用户体验，使你的应用更加专业和易用。请根据你的实际应用场景选择合适的路由器类型，并确保正确配置 <ScrollRestoration> 组件。