当按下后退按钮时,浏览器会重新加载反应应用程序

时间:2019-10-08 06:50:17

标签: reactjs

我有一个简单的react应用程序,要访问该应用程序,用户单击另一个页面上的锚标签。这是 。假设此页面为http://localhost/index.html

它可以很好地重定向到react应用。假设它在http://localhost/react/simple_app上。在此React应用中,我使用React Router,如果没有路由匹配,则可以捕获所有路由。它将仅呈现文本“找不到页面”。

当我单击“后退”按钮转到index.html时,Chrome和Firefox都会重新加载simple_app,其URL设置为http://localhost/index.html。显然,这将使simple_app呈现“找不到页面”,因为路由http://localhost/index.html未在其路由中定义。呈现后,浏览器将立即呈现上一页。因此,在此操作上,用户将看到正确呈现的上一页。到目前为止,一切似乎都还很小,当短暂呈现“找不到页面”时,它只是闪烁一下,然后迅速重新呈现index.html。

不好的是,如果我再按浏览器上的“转发”页面,它将不会再次重新渲染simple_app。它只会显示“找不到页面”。我对此表示怀疑,是因为短暂地它已经在“向后移动”(URL错误)之前渲染了它,因此浏览器将从缓存中加载它。

使用reactjs在Firefox和Chrome上进行了尝试。尽管此行为可以用任何JS复制,但对React Router来说尤其成问题。

也尝试过,如果我键入URL http://localhost/simple_app,如果我单击返回,它将不会使用错误的URL进行时髦的重新加载。

不确定是否有好的解决方案来防止这种情况的发生。

1 个答案:

答案 0 :(得分:0)

为帮助到达这里的每个人,经过一番挖掘和一点运气,我发现了问题所在,该问题源于我们使用的称为turbolinks的库(红宝石)。 https://github.com/turbolinks/turbolinks

此gem注入了javascript,这些javascript拦截了前后导航等各种导航API,例如锚标签和浏览器,以便它可以像我们的本机应用程序一样表现为单页应用程序(无需重新加载)。

因此,如果您遇到类似的行为,则可能不是在使用Ruby,而是要检查您使用的库的行为与Ruby的Turbolinks类似。希望这会有所帮助。