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

本文档旨在解决在使用 React Router v6 进行页面跳转时，页面未能自动滚动到顶部的问题。我们将介绍如何利用 createMemoryRouter 和 <ScrollRestoration> 组件来实现这一功能，确保用户在每次路由切换后都能获得最佳的浏览体验。

在 React 应用中使用 React Router v6 进行路由管理时，一个常见的需求是在页面跳转后自动将页面滚动到顶部，以提供更好的用户体验。如果使用 MemoryRouter，则需要使用 createMemoryRouter 来解决这个问题。本文将详细介绍如何配置 createMemoryRouter 和 <ScrollRestoration> 组件，实现页面跳转后的自动滚动功能。

使用 createMemoryRouter 和 <ScrollRestoration>

React Router v6 提供了 <ScrollRestoration> 组件，但要使其正常工作，需要配合使用 data router。这意味着你需要使用 createMemoryRouter 来创建你的 router 实例，而不是直接使用 MemoryRouter。

以下是如何修改你的 App.js 文件以使用 createMemoryRouter 的步骤：

1. 导入必要的模块：

   import { Route, createMemoryRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom';

   登录后复制

2. 创建 router 实例：

   使用 createMemoryRouter 和 createRoutesFromElements 函数来定义你的路由配置。createRoutesFromElements 可以让你使用 JSX 风格来声明路由。

   

   Remove.bg

   AI在线抠图软件，图片去除背景

   102

   查看详情

   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>
       </>
     )
   );

   登录后复制

3. 使用 RouterProvider 组件：

   将你的 <Router> 组件替换为 <RouterProvider>，并将创建的 router 实例传递给它。

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

   登录后复制

完整代码示例：

import { useState } from "react";
import { Route, createMemoryRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom';
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 创建的 router 实例需要通过 RouterProvider 组件来提供给你的应用。
• <ScrollRestoration> 组件会自动处理页面滚动到顶部的逻辑，无需手动编写代码。

总结：

通过使用 createMemoryRouter 和 <ScrollRestoration> 组件，你可以轻松地实现 React Router v6 应用中页面跳转后自动滚动到顶部的功能，从而提升用户体验。记住，data router 是 <ScrollRestoration> 组件正常工作的必要条件。

以上就是React Router v6：页面跳转后自动滚动到顶部的详细内容，更多请关注php中文网其它相关文章！