在导航到新页面后，停止 Reach Router 滚动页面。

11 浏览
0 Comments

在导航到新页面后，停止 Reach Router 滚动页面。

当我导航到一个新的页面时，Reach Router会滚动到页面内容的下方（如果内容足够长）。我猜这是为了提高可访问性，但对于我的应用来说并不必要，而且实际上有些让人不舒服。这个行为能否被禁用？请注意，我谈论的是Reach Router而不是React Router。

[Reach Router](https://github.com/reach/router)

0

3 答案

0 Comments

问题原因：在使用Reach Router导航到新页面后，页面会自动滚动到页面底部，而不是停留在页面顶部。这可能会导致用户在导航后需要重新滚动页面以查看新内容。

解决方法：通过使用React的useLayoutEffect()钩子而不是useEffect()钩子，可以解决页面滚动问题。这样，滚动操作将在DOM完全渲染之后发生，因此不会出现奇怪的"弹跳"现象。

以下是解决方法的代码示例：

// ScrollToTop.js
import React from 'react'
export const ScrollToTop = ({ children, location }) => {
  React.useLayoutEffect(() => window.scrollTo(0, 0), [location.pathname])
  return children
}

如果您正在使用代码拆分和React.Suspense，还需要在使用fallback组件时，将上述钩子添加到没有location参数的情况下，即`useLayoutEffect(() => window.scrollTo(0,0))`。否则，页面将无法滚动到顶部。

这样做之后，页面在导航到新页面后将停留在顶部，并且可以使用平滑滚动效果来实现良好的动画效果。即使在一个React静态应用中，其他答案对我来说都没有解决这个问题，即使使用了`primary={false}`也不行。

0
0 Comments

停止使用Reach Router在导航到新页面后向下滚动页面是一个常见的问题。这个问题的原因是，默认情况下，Reach Router会使用HTMLElement.focus()函数来将焦点聚焦在匹配的元素上，以便屏幕阅读器等辅助功能可以定位到新更新的相关内容。然而，这个函数会导致页面滚动到聚焦的元素位置。虽然HTMLElement.focus()函数有一个preventScroll参数可以用来关闭滚动行为，但是这个参数的浏览器支持不好，并且Reach Router没有使用这个参数。

在解决这个问题时，通常会有一个错误的解决方法，即在主要的上设置primary={false}。虽然这样做可以停止滚动行为，但是却会完全关闭焦点聚焦的行为，从而破坏了可访问性功能。

那么，有没有其他解决方法呢？实际上，目前看来，无法避免HTMLElement.focus()函数的滚动行为。因此，如果你想要可访问性功能，就必须接受滚动行为。但是，有一个解决方法，就是在每次路由改变时手动滚动到页面顶部，使用window.scrollTo(0, 0)函数可以实现这个目的。这样做不会破坏可访问性功能，但可以从用户体验的角度修复滚动行为。

下面是一个实现这个解决方法的示例代码：

class OnRouteChangeWorker extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      this.props.action()
    }
  }
  render() {
    return null
  }
}
const OnRouteChange = ({ action }) => (
  
    {({ location }) => }
  
)
const Routes = () => (
  <>
    
      
        
        
        
      
    
     { window.scrollTo(0, 0) }} />
  
)

这个解决方法虽然有点hacky和命令式，但是我认为这是解决这个问题的最佳方法，也是唯一的方法，而不会破坏可访问性。通过在每次路由改变时手动滚动到页面顶部，可以避免滚动行为，并保持可访问性功能的完整性。

0
0 Comments

问题：在导航到新页面后，停止Reach Router向下滚动页面的问题。

原因：默认情况下，Reach Router会在位置转换时管理焦点。这可能会导致页面滚动到奇怪的偏移位置。

解决方法：尝试使用``来禁用焦点管理。这将在路由组件上不会聚焦。这对于作为侧边栏、标题、面包屑等呈现的路由器非常有用，但不适用于主要内容。

注意：如果您担心破坏可访问性，请查看此答案：https://stackoverflow.com/a/56996986/428780

警告：我不建议这种方法。这会破坏可访问性，而使用Reach Router的主要原因之一就是可访问性。有关更多信息，请参见我的答案。

我理解您担心其他人使用此解决方案，但正如提问者所说：“我假设这是为了可访问性，但对于我的应用程序来说这是不必要的”，所以这对他来说是正确的解决方案。

是的，这很公平。我并不是说您没有解决提问者的问题。我只是想提醒一下，对于大多数使用Reach Router的人来说，这可能不是最佳的通用解决方案，因为其他人可能只是匆忙地选择了投票数远远超过其他答案的答案而错过了这个细节。

0