Reaction-路由器v6窗口.scllTo不起作用 [英] React-router v6 window.scrollTo does not work

问题描述

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

以下是我尝试的内容：

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.scllto不起作用。
我也尝试了useLayoutEffect，但同样的结果仍然不能滚动。

推荐答案

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

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

相关：react-router scroll to top on every transition

这篇关于Reaction-路由器v6窗口.scllTo不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！