有条件地在 dom 更改反应路由器时禁用滚动到顶部答案

【问题标题】：Conditionally disable scroll to top on dom change react router有条件地在 dom 更改反应路由器时禁用滚动到顶部
【发布时间】：2020-07-21 20:56:54
【问题描述】：

我在浏览器路由器中实现了一个 ScrollToTop 组件，因此每次新的 dom 更改时滚动位置为 (0,0)。

即）/explore > /about 将滚动到顶部。

但是，在探索页面中，我有一个类似选项卡的子菜单（主页、项目、预算），它可以操纵路由器在不应该滚动到顶部时滚动到顶部。 Home选项卡采用Explore的默认路径，而Items和Budget是Explore内的嵌套路由。

即）/explore > /explore/items 或 /explore > /explore/budget

我尝试在 ScrollToTop 组件中使用条件，但失败了。我查看了 React 路由器培训恢复滚动指南，但没有成功。有人知道如何在某些路径名或位置有条件地禁用滚动到顶部吗？

这是我的 ScrollToTop：

const ScrollToTop = (props) => {

  useEffect(() => {
    if (props.history.action === 'POP') {
        return;
    }

    let hash = props.location.hash;
    if (hash) {
      let element = document.querySelector(hash);
      if (element) {
        element.scrollIntoView({block: 'start', behavior: 'smooth'});
      }
    } else {
      window.scrollTo(0, 0);
    }    
  });
};

【问题讨论】：

您将不得不分享 ScrollToTop 的实现
@TomFinney 我刚刚更新了我的帖子 :)
@episodewon 你可以在这里写下你的方法作为答案。

标签： reactjs scroll react-router

【解决方案1】：

react-router-dom <Router /> 组件中有一个 prop 可以设置为 true 来关闭它：

disableScrollToTop={true}

【讨论】：

【解决方案2】：

我不太清楚你已经尝试过什么，但根据你的代码 sn-p，我将这个快速沙箱放在一起，展示如何阻止它：https://codesandbox.io/s/recursing-river-3bjf5

您可以看到，如果您滚动页面并单击 thisthat 链接，它不会滚动到顶部，但会滚动到其他链接。

我想关键是我们通过将组件传递给Route 来渲染组件，因此它直接接收所有路由器道具<Route component={ScrollToTop} />（您可以使用 withRouter 装饰器或其他东西，但它们都实现了相同的目标）

然后，它只有一个路径名列表，例如const dontScrollIntoViewOnPaths = ["/this/that"];

我们从位置let { hash, pathname } = location;中提取出最近的路径名

然后我们只是不执行代码，除非路径名不在那个列表中

 else if (!dontScrollIntoViewOnPaths.includes(pathname)) {
      window.scrollTo(0, 0);
 }

有用吗？

【讨论】：

太好了，感谢您的反馈！我以为我已经尝试过类似的东西..我最终实现了以前的位置，所以它只在嵌套路由内阻止 scrollToTop :)