相关疑难解决方法(0)

导航到另一个页面时出现问题,其位置将保持与之前的页面相同.所以它不会自动滚动到顶部.我也试过window.scrollTo(0, 0)在onChange路由器上使用.我也使用scrollBehavior来解决这个问题,但它没有用.对此有何建议？

我正在尝试解决 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，但相同的结果仍然不滚动。

我正在尝试使用react-router dom v6滚动到每个页面更改的顶部。该代码仅在我的主页上滚动回到顶部，而不是在我的角色详细信息页面上滚动。我尝试了很多解决方案，但无法让它们发挥作用。我正在使用“react-router-dom”：“^6.2.2”，

这是我到目前为止所取得的成就：

ScrollToTop.js：

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop({ children }) {
    const { pathname } = useLocation();
    
    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname]);
    
    return children;
}

我的应用程序.js

  <Router>
    <ScrollToTop>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/character/:char_id" element={<CharacterDetail />} />
        <Route path='*' element={<PageNotFound />} />
      </Routes>
      <Footer />
    </ScrollToTop>
  </Router>

我还尝试使用 'window.scrollTo(0, 0);' 直接执行我的组件 并滚动到我的 useEffect 中的 ID，但没有成功。感谢您的指导。