如何为React Router SPA实现滚动还原 [英] How to implement scroll restoration for React Router SPA

问题描述

我正在构建一个React单页应用程序，并且我发现滚动恢复似乎无法在Chrome(可能还有其他浏览器)中按预期工作.

I'm building a React single-page application, and I've noticed the scroll restoration does not appear to work as expected in Chrome (and maybe other browsers.)

在react-router-dom github存储库上，他们有一个页面，显示浏览器是

On the react-router-dom github repo, they have a page that says that browsers are starting to natively handle scrolling for single page apps, and the behavior would be similar to that of a traditional non-SPA web page, if history.scrollRestoration is set to auto.

该页面上显示了我需要的行为:

The behavior I need is indicated on that page:

1. 向上滚动导航，这样就不会启动滚动到的新屏幕 底部.
2. 还原窗口的滚动位置并溢出 后退"和前进"点击上的元素(而不是链接"点击！)

1. Scrolling up on navigation so you don't start a new screen scrolled to the bottom.
2. Restoring scroll positions of the window and overflow elements on "back" and "forward" clicks (but not Link clicks!)

但是我还需要禁用包含制表符或轮播的路由的行为.

But I also need to disable the behavior for routes that contain tabs or a carousel.

这里是 Chrome在问题.

我在适用于OS X的Chrome版本78.0.3904.97(官方内部版本)(64位)中观察到的内容似乎是我从history.scrollRestoration manual设置所期望的.也就是说，当我向下滚动到页面的一半，然后单击一个链接时，下一个页面将在页面的中间滚动，直到与上一页相同的位置.

What I'm observing in Chrome Version 78.0.3904.97 (Official Build) (64-bit) for OS X, is what appears to be what I'd expect from the history.scrollRestoration manual setting. That is, when I'm scrolled half way down a page, and I click a link, the next page is scrolled halfway down the page, to the same point as the previous page.

我已经在各个地方检查了history.scrollRestoration，发现它开始并保持为auto(默认值)

I've checked the history.scrollRestoration at various points and find it starts and stays auto, the default,

@TrevorRobinson的回答是这里的一个重要意义"是浏览器自动尝试滚动还原... ...大多数情况下不适用于单页面应用程序..."好吧...我发现了一致的支持对于history.scrollRestoration，但显然浏览器在实际进行滚动还原时表现得很差劲.然后应注意

One point of significance here is this from @TrevorRobinson's answer "the browser's automatic attempts at scroll restoration... ...mostly don't work for single-page apps..." Ok... I found consistent support for history.scrollRestoration, but apparently browsers are crappy at actually DOING the scroll restoration. Then that should be noted here, which would have saved me time today.

然后，我寻找手动执行此操作的方法，但我不清楚前进的方向. react-router-scroll表示它与React Router v4不兼容，但没有提及v5，该版本在此问题上是最新的.那么我应该假设v5也不兼容吗?

Then I look up ways to do this manually, and I'm not clear of the way forward. react-router-scroll says it's not compatible with React Router v4, but doesn't mention v5, which is current as of this question. So should I assume v5 is also not compatible?

因此，我进一步寻找前进的方向，并找到了关于如何使用React Router v4处理滚动恢复的SO答案 ...我是否应该假定将与React Router v5一起使用? 更新:它在v5中似乎不适用于我.我尝试了几种配置.我也无法使其完全与React Router v4一起使用.我知道它至少还活着，因为它滚动到新页面的顶部，但是历史记录没有恢复.

So I look further for a way forward, and found this SO answer about how to handle scroll restoration with React Router v4... Should I assume that will work with React Router v5? Update: It does not appear to work for me in v5. I tried several configurations. I also could not get it completely working with React Router v4. I knew it came alive at least, as it was it scrolls to top on a new page, but restoration in the history does not occur.

我也确实获得了 react-router-scroll-memory 的工作，但是它没有用于禁用在指定路线上滚动的选项，例如制表符或轮播所需的选项...我可能会对其进行破解以使其正常工作.

I did also get react-router-scroll-memory working, but it does not have options for disabling scrolling on designated routes, like what would be needed for tabs or a carousel... I might just hack it to make it work.

我考虑使用 oaf-react-router ，但是在有关禁用某些路线的滚动还原或滚动到顶部的文档. 如我的回答所述，它确实可以处理此问题.

I considered using oaf-react-router, but it says nothing in the documentation about disabling scroll restoration or scroll-to-top for certain routes. It does actually handle this, as outlined in my answer.

有什么我忽略的东西吗?解决此问题的标准是什么，因为我不能是唯一需要此功能的人.似乎我正在做一些前卫和实验性的工作，但我只需要让自己的网站像普通网站一样滚动即可.

Is there something I've overlooked? What is the standard for dealing with this issue, because I can't be the only one who needs this feature. It seems like I'm doing something edgy and experimental, but I just need my site to scroll like a normal site.

推荐答案

一种方法是使用

One way to do this is with oaf-react-router. Use the shouldHandleAction options in the settings. The function gets passed previousLocation and nextLocation which you can use to determine if scroll should be reset/restored, and return false if not.

const history = createBrowserHistory();

const settings = {
   shouldHandleAction: (previousLocation, nextLocation) => {
       // Inspect/compare nextLocation and/or previousLocation.
       return false // false if you don't want scroll restoration.
   }
};

wrapHistory(history, settings);

oaf-react-router可与React Router v4和v5配合使用，并且可处理可访问性，而许多SPA路由器则无法访问，因此这可能是目前最完整的解决方案.

oaf-react-router works with React Router v4 and v5, and handles accessibility, where many SPA routers do not, so it may be the most complete solution at this time.

奇怪的是，文档中没有详细介绍此功能.

Curiously, the documentation does not elaborate on this feature.

如果其他人有可行的解决方案，并且将其视为更标准的解决方案，请在此处提供答案，我将考虑更改所选答案.

If anyone else has a solution that works and would be considered more of a standard, please provide an answer with it here, and I'll consider changing the selected answer.

这篇关于如何为React Router SPA实现滚动还原的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！