React-router-dom 链接在页面顶部打开

Question

所以我觉得问这个问题很愚蠢，但找不到直接的答案。

我是否需要提供任何 css 参数或直接提供给

<Link>

才能在顶部打开我的 React 应用程序上的页面？

编辑 因此，每次我在 ReactJs 项目中单击

<Link>

元素时，链接都会在屏幕中间打开一个页面，而不是顶部。

例如。我有这个组件

 <li ><Link to={{pathname: "/product", state: {products}}}><i className="fa fa-search"></i></Link></li>

当我单击“进入”时，它会打开一个新页面/组件，但不在页面顶部。用户需要向上滚动才能看到顶部，我想直接在顶部打开新页面！

Answer 1

无需安装任何额外的库即可完成此操作。您可以在

这里

查看react-router的官方示例进行滚动恢复。

Answer 2

您可以使用库react-scroll，并检测何时更改位置的路径名，像这样滚动到顶部

import { animateScroll } from 'react-scroll';

useEffect(() => {
    animateScroll.scrollToTop({
      duration: 0
    });
}, [location.pathname]);

Answer 3

制作scrollToTop函数并在链接标签中使用它

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

当用户单击任何链接时，我们的函数将使页面滚动到顶部。

 <li   onClick={scrollToTop} ><Link to={{pathname: "/product", state: {products}}}><i className="fa fa-search"></i></Link></li>

Answer 4

我正在为我的 React 博客使用类组件。通过添加以下方法并在 componentDidMount() 中调用它解决了这个问题。

scrollToTop = () => {
    window.scrollTo(0, 0)
}
componentDidMount() {
    this.scrollToTop()
}

您可以检查此代码是否有效。活生生的例子，博客。

如果您使用的是函数组件，那么您可以使用相同的方法并在 UseEffect() 中调用它。

Answer 5

这对我有用...... 我创建了一个将在 10 纳秒后运行的函数，我尝试过不使用计时器并制作取决于路径的使用效果，但这对我来说不起作用......

const YourComponent = () => {

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

  useEffect(() => {
    const timerId = setTimeout(() => {
      scrollToTop()
    }, 10)

    return () => clearTimeout(timerId)
  }, [])

  return (
    <>
      ....
    </>
  )
}