如何在客户端路由之间导航时恢复滚动位置？

Question

我的设置类似于以下

<BrowserRouter>
    <NavBar />
    <Switch>
        <Route exact path='/' render={Home} />
        <Route path='/blog' render={Blog} />
        <Route path='/about' render={About} />
    </Switch>
</BrowserRouter>

在NavBar 中，我使用<NavLink> 设置了指向所有这些路由的链接。

我完全能够在路线之间导航，但滚动位置没有恢复。

根据 react-router 文档，浏览器应该能够恢复滚动位置。但它仅在使用 browser back button 或 history.goBack() 完成导航时才有效。但是，它并不适合当前场景，因为导航链接始终可见，并且使用返回在不同路线之间导航并不实用。

我认为<Link> 正在推动新的历史路径，浏览器将其视为新页面。那么有什么解决方法或标准解决方案来克服这个问题吗？

Answer 1

这本身不是问题，因为从用户体验的角度来看，您不希望在单击链接时恢复滚动位置，只有在使用后退按钮时。