React-router v6 window.scrollTo 不起作用答案

【问题标题】：React-router v6 window.scrollTo does not workReact-router v6 window.scrollTo 不起作用
【发布时间】：2021-04-06 14:17:31
【问题描述】：

我正在尝试修复 React 中的滚动问题，当我向下滚动到页面上的某个点，然后导航到另一个页面时，该页面将从与上一页相同的滚动点开始。

这是我尝试过的：

import { useLocation } from 'react-router'

const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation()
  React.useEffect(() => {
    console.log('im scrolling')
    window.scrollTo(0, 0)
  }, [pathname])

  return null
}

export default ScrollToTop

然后像这样导入它：

import React from 'react'
import ReactDOM from 'react-dom'

import { BrowserRouter } from 'react-router-dom'

import ScrollToTop from './components/base/ScrollToTop'
import Apps from './App'

ReactDOM.render(
  <BrowserRouter>
    <ScrollToTop />
    <Apps />
  </BrowserRouter>,
  document.getElementById('root'),
)

我正在滚动 正在控制台中打印，但 window.scrollTo 不起作用。
我也尝试了 useLayoutEffect，但同样的结果仍然无法滚动。

【问题讨论】：

如果您直接在开发工具中调用window.scrollTo 是否有效？这可能与 HTML/CSS 标记以及哪些元素可滚动有关。
我尝试在控制台中粘贴但也不起作用，它返回undefined，尝试使用document.getElementById("root").scrollTo(0, 0) 仍然返回undefined
我明白了，我认为 window.scrollTo(0,0) 返回 undefined 是预期的行为。如果函数scrollTo 本身是未定义的，那就更成问题了。如果您使用 Firefox 并打开开发工具，您应该能够看到哪些 HTML 元素被标记为scroll。然后看看是否抓住 element.scrollTo(0,0) 有效。
感谢@AsherLim，通过定位特定的父容器来修复它。这是我实现页面布局的方式，滚动内容在子容器中。 ????????????????????????

标签： reactjs react-router react-router-dom

【解决方案1】：

尝试抓取document.documentElement 或其他特定元素，而不是window。

const location = useLocation();
useLayoutEffect(() => {
  document.documentElement.scrollTo(0, 0);
}, [location.pathname]);

【讨论】：