本文介绍了在使用 React Router v6 时，如何确保在页面路由切换后，页面能够自动滚动到顶部。通过使用 createMemoryRouter 和
在使用 React Router v6 构建单页应用（SPA）时，一个常见的需求是在页面跳转后自动滚动到页面顶部，以便用户能够立即看到新页面的内容。虽然 react-router-dom 提供了一些组件，但如果不正确使用，可能无法达到预期的效果。
要实现页面跳转后滚动到顶部的功能，需要使用 createMemoryRouter 来创建路由器，并配合
以下是具体的步骤和代码示例：
-
使用 createMemoryRouter 创建路由器：
首先，你需要将 MemoryRouter 替换为 createMemoryRouter。同时，你需要使用 createRoutesFromElements 从 JSX 元素创建路由。
import { Route, createMemoryRouter, createRoutesFromElements, RouterProvider, } from 'react-router-dom'; const router = createMemoryRouter( createRoutesFromElements( <>}> } /> } /> } /> } /> } /> }> } /> ) ); -
使用 RouterProvider：
将
替换为 。 function App() { // ... return ( -
添加
组件（可选，但推荐）： 组件可以自动处理滚动位置的恢复。虽然 createMemoryRouter 已经包含了滚动到顶部的功能，但 提供了更完整的滚动管理，例如在前进/后退时恢复滚动位置。 通常放在App.js中。 import { ScrollRestoration } from "react-router-dom"; function App() { // ... return (
注意事项：
- 确保你已经安装了 react-router-dom v6 或更高版本。
- createMemoryRouter 适用于在内存中维护路由历史记录的场景，例如在测试环境或不需要持久化 URL 的应用中。在生产环境中，你可能需要使用 createBrowserRouter。
- 如果使用了自定义的滚动行为，可能需要覆盖默认的滚动恢复逻辑。
总结：
通过使用 createMemoryRouter 和
