React路由器V6模态重新加载背景页面位置（而不是保存滚动位置）

Question

使用React Router Router V6。我已经设置了路由，以便将背景点传递给路由，而模态则以其他路由为背景页面正确打开。我在页面上向下滚动时打开模态时遇到了意外的行为 - 页面“重新加载”，所以它回到了页面的顶部，然后打开模态。模态关闭时，背景页面正确显示（向下滚动）。看起来很紧张。相反，我希望模态能够打开/关闭，而不会更改背景页面的滚动位置。我跟随非常紧密。

这是相关代码：

import React from "react";
import { Route, Routes, useLocation } from "react-router-dom";

const Routes: React.FC = () => {
  const location = useLocation();
  const state = location.state as {
    backgroundLocation?: Location;
  };

  return (
      {/* Pass location to Routes so that Page remains background when ModalVersion is opened */}
      <Routes location={state?.backgroundLocation || location}>
        <Route path={'/'} element={<Home />} />
        <Route path={'/page'} element={<Page />} />
        <Route path={'/page/:more_info'} element={<PageVersion />} />
      </Routes>

      {/* Open Modal if state.backgroundLocation is defined */}
      {state?.backgroundLocation && (
        <Routes>
          <Route path={'/page/:more_info'} element={<ModalVersion />} />
        </Routes>
      )}
  )

...

import { Link } form "@mui/material"    
import { Link as RouterLink } from "react-router-dom";

const Page: React.FC = () => {

 return (
   <APageComponentContainingALink>
    <Link
      component={RouterLink}
      to={"/page/some_info"}
      state={{ backgroundLocation: location }}
    >
      ...
    </Link>
   </ APageComponentContainingALink>
  )

}
export { Page };

...

  // Returns the same as PageVersion, but wrapped in a modal
  const ModalVersion: React.FC = () => {
    
      return (
        <Modal>
          <Info />
        </Modal>
      )
    
    }
    export { ModalVersion };

...

// Returns the same as ModalVersion, but on its own page
const PageVersion: React.FC = () => {

  return (
    <Info />
  )

}
export { PageVersion };

Answer 1

React路由器卷轴修复文档可能是您想要的：
https://v5.reactrouter.com/web/guides/guides/guides/scroll-Restoration

没有看到结果，我的假设是，由于组件在单页上渲染/卸载，因此DOM可能会发生一些高度调整。执行这些卷轴修复效果可能会阻止这种情况发生。