本文介绍了Reaction-路由器v6窗口.scllTo不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试修复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不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-17 21:49