相关疑难解决方法(0)

如何使用 React router dom v6 滚动到路由更改顶部？

我已经尝试过这个，react-router在每次转换时滚动到顶部，这是我的解决方案，当我使用v5时，使我的页面在路线更改时滚动到顶部react-router-dom。现在，我使用的是react-router-domv6，这个解决方案不起作用。

我尝试了React-router v6 window.scrollTo 不起作用 ，也不适合我。

我尝试了https://github.com/remix-run/react-router/issues/7365，即使用preloadprop 来触发scrollTo(0,0)，对我来说也不起作用。

当我导航到新页面时，“到达路由器”向下滚动到页面内容的标题上方（如果内容足够长）。我假设这是为了可访问性，但对于我的应用程序不是必需的，并且实际上是很麻烦的。可以禁用此行为吗？

请注意，我所说的是“到达路由器”而不是“反应路由器”。

到达路由器

我最近更新了路由器版本4的反应.在以前的版本中,我使用onUpdate回调来触发一个功能,使路由更改时页面滚动到顶部.

它似乎onUpdate已被弃用,我无法在文档中的任何地方找到它所取代的内容.

还有其他人遇到过这个问题吗？

const handlePageChange = () => {
    window.scrollTo(0, 0);
};  

ReactDOM.render(
    <Provider store={store}>
        <Router onUpdate={handlePageChange} history={browserHistory}>
            <Redirect from="/" to="/music" />
            {routes}
        </Router>
    </Provider>,
    document.getElementById('root')
);

我正在尝试解决 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(0,0)呼叫置于反应组件中？

我试图将它直接放入render并尝试componentDidUpdate(等待所有内容都被渲染),但不知何故滚动条始终保持在同一位置.

- 编辑 -

问题是窗口和身体的CSS高度/溢出.

请参阅:https://stackoverflow.com/a/18573599/1016383

我正在使用React Router 4,当我使用<Link>新页面时,不会在页面顶部打开.我需要讲<Link>一些具体的内容吗？

<Link to="/mypage">My Page</Link>

在我的应用程序中，当我从一个页面更改到另一个页面时，该页面将保持在与上一页相同的位置。我想让它在交换页面时转到顶部。

React-router文档有一个解决方案：https ://reactrouter.com/web/guides/scroll-restoration

我在一个名为的组件中实现了它ScrollToTop，并用它包装了我的整个应用程序，但其中的所有内容都没有被渲染。我不知道为什么。

滚动到顶部：

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

应用程序：

import React from 'react';

import './App.css';

import Layout from './containers/Layout/Layout'
import MainPageConfig from './containers/MainPageConfig/MainPageConfig'

import ScrollToTop from './HOC/ScrollToTop'

import { BrowserRouter, Route, Switch } from 'react-router-dom'


function App() {
  return (
    
      <BrowserRouter >        
        <Layout>
          <ScrollToTop>
            <Switch>
              <Route path="/" …

我在 Reactjs 上创建了一个网站，并使用“react-router-dom v6”链接了各个页面。每当我从一个页面转换到另一个页面时，第二页总是加载到当前位置而不是顶部。我已经尝试了很多教程和解决方案，但它们在react-router-dom v5之前都有效。