Javascript 为什么要从屏幕底部渲染新页面？

我的react项目中有多个页面，每当我从一个页面切换到另一个页面时，页面位置从底部开始，但在呈现页面后，我希望保持在顶部。我目前正在使用路由器v5，我找不到任何路由器v5的解决方案

我还尝试了另一个版本的解决方案，但它不起作用，请您帮助我解决这个问题

这些是我迄今为止尝试过的一些例子，但没有一个是有效的

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router>

window.scrollTo（0，0）}history={createBrowserHistory（）}>
...

函数handleUpdate（）{
让{
行动
}=此.state.location；
如果（操作=='PUSH'）{
滚动到（0，0）；
}
}
...

这是我用来解决这个问题的解决方案。创建新组件：

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

const ScrollToTop = ({ children }) => {
  const { pathname } = useLocation();

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

  return children || null;
};

export default ScrollToTop;

并将应用程序内容包装在浏览器路由器内

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ScrollToTop from './components/scroll-to-top/scroll-to-top';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <ScrollToTop>
          <div />
        </ScrollToTop>
      </BrowserRouter>
    </div>
  );
}

export default App;

从“React”导入React；
从“react router dom”导入{BrowserRouter}；
从“./components/滚动至顶部/滚动至顶部”导入滚动至顶部；
函数App（）{
返回(
);
}
导出默认应用程序；

创建下一个组件：

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;
}

将其导入index.js并在切换组件之前使用，如下所示：

  <ScrollToTop />
  <Switch>  
    ...
  </Switch>

...

---

而且它应该可以工作。

以上使用

窗口的方法。scrollToView（0，0）

对我不起作用。因此，另一个对我有效的解决方案是在顶部有一个

div

和一个

ref

。然后在

useffect

钩子中调用

scrollIntoView

方法，在渲染时将

div

滚动到视图中

import React, { useEffect, useRef } from "react";

const TestComponent = () => {
const topContainer = useRef();

useEffect(() => {
  // To make sure page starts from the top
  topContainer.current.scrollIntoView({ block: "end", behavior: 'smooth' });
  }, []);

return (
  <>
    <div ref={topContainer} />
    <div>Component to be rendered here</div>
  </>
  );
};

import React，{useffect，useRef}来自“React”；
常量TestComponent=（）=>{
const topContainer=useRef（）；
useffect（（）=>{
//确保页面从顶部开始
topContainer.current.ScrollingToView（{block:'end'，behavior:'smooth'}）；
}, []);
返回(
要在此处渲染的组件
);
};

---

如果您不希望滚动动画平滑，则传递给

scrollIntoView

的属性

behavior:“smooth'

也可以省略。

它给了我这个错误。尝试导入错误：“useLocation”未从“react router dom”导出。啊，那么您应该升级react router，挂钩是最近添加到它的。我刚刚更新了react router库，还重新安装了节点模块，但仍然出现相同的错误。它需要是版本5.1。不确定您是否更新了该版本to@zee7,如果升级不是一个选项，您可以避免使用“useLocation”。将代码更改为使用window.location.pathname，如下所示：//const{pathname}=useLocation（）；const pathname=window.location.pathname；[它给了我这个错误。尝试导入错误：“useLocation”不是从“react router dom”导出的。@Taher我刚刚更新了react router库，还重新安装了节点模块，但仍然给出相同的错误。@zee7您使用的是哪一版本的react router dom？

import React, { useEffect, useRef } from "react";

const TestComponent = () => {
const topContainer = useRef();

useEffect(() => {
  // To make sure page starts from the top
  topContainer.current.scrollIntoView({ block: "end", behavior: 'smooth' });
  }, []);

return (
  <>
    <div ref={topContainer} />
    <div>Component to be rendered here</div>
  </>
  );
};