reactjs - 在我的案例中执行 React Router 历史推送时如何滚动到页面

Question

我学习了一些 React-router-dom 并且它有点工作，但是因为我有三个 Components 一个接一个，就像一个长页面。然后当我点击顶部菜单中的 about 按钮时；

<Button variant="primary" onClick={() => history.push('/articles')}>
        Articles
</Button>
<Button variant="primary" onClick={() => history.push('/stories')}>
        Stories
</Button>
<Button variant="primary" onClick={() => history.push('/about')}>
        About
</Button>

/about 页面已呈现但未滚动到，因为它是第 3 页。有什么方法可以自动滚动到该页面吗？

我的菜单不是固定的，但每当用户向上滚动时菜单就会出现，而当用户向下滚动时菜单就会消失，不会阻止内容。

看起来这三个组件组成了一个长页面

React router 或 useHistory 中是否内置了一些东西，或者我是否必须想办法让组件知道它们是从主菜单中调用的？然后他们自己计算如何滚动到可见。

我对 React Redux 知之甚少，并且认为我可以从菜单按钮和 mapStateToProp 中分派(dispatch)和操作并监听组件中的操作，然后滚动可见。感觉就像一个糟糕的黑客不知道。

Answer 1

不确定这是否有效，或者这个是否是一致/最佳的解决方案，但就目前而言，您可以尝试使用这个没有其他答案

  const onAboutPageClick = () =>{
    const aboutPageNode = document.getElementById('aboutPage')

    aboutPageNode.scrollIntoView({behavior: "smooth"});
    history.push('/about')
}


<Button variant="primary" onClick={() => history.push('/articles')}>
  Articles
</Button>
<Button variant="primary" onClick={() => history.push('/stories')}>
Stories
</Button>
<Button variant="primary" onClick={onAboutPageClick}>
    About
</Button>


..... some other html code

<div id="aboutPage"> Here is about page </div>