强制React-Router应用将URL请求发送到服务器

Question

我正在开发带有React Router的React App，该Server托管着React App本身和REST API。 路由器是react-router-redux中的ConnectedRouter。 据我了解，一旦您在浏览器中打开了应用程序，就不会从服务器请求对URL进行任何更改，而是会在React Router中处理客户端，即使您重新加载页面或在地址栏中手动写一些内容。

首次打开该应用程序时，实际的HTML，JS和CSS文件是从Web服务器加载的，该服务器配置为仅在授权用户的情况下才提供服务。 这样，服务器可以将用户重定向到第三方身份验证站点，或者在用户经过身份验证但未经授权的情况下提供401消息。 但是，当用户会话过期，他注销或权限更改从而不再授权他打开应用程序时，就会发生问题。 然后，当用户在以前已缓存应用程序的浏览器中打开该应用程序时，它似乎可以正常打开，但是会出现很多错误，因为现在每个API调用都会失败。

为了解决这个问题，我想在API调用失败时告诉用户重新加载页面，以便向服务器发出请求以获取应用程序（index.html等），以便将他重定向到第三个第三方认证站点。 但是，常规的浏览器重新加载（F5）不会削减它。 该请求被react-router吞没，并且从未命中服务器。 window.location.reload（）也是这种情况。 硬重载，即Ctrl + F5似乎可以解决问题，至少在chrome中是这样，但是有些用户可能不明白。 因此，我想为用户提供一个“硬重载”按钮，该按钮临时告诉react-router产生url请求，以便它们可以传递到服务器并尝试获取index.html。

所以我的问题是：我该如何临时性地以编程方式强制客户端应用程序允许URL请求正常发送到服务器，而不是在react-router中本身处理它们？

或者，如果不可能，如何以编程方式从浏览器的内存中清除该应用程序，以使其被迫再次请求服务器？

编辑：似乎我的假设是，请求被react-router吞没了。 它是create-react-app框架中的服务工作者。 服务人员公开了一个注销功能，该功能解决了我的问题。

Answer 1

据我了解，一旦您在浏览器中打开了应用程序，就不会从服务器请求对URL进行任何更改，而是会在React Router中处理客户端，即使您重新加载页面或在地址栏中手动写一些内容。

这不是真的。 手动更改地址栏中的内容（并按Enter键）后，您始终始终会先点击服务器路由器。

无论命中哪个URL，您的服务器很可能始终呈现包含React应用程序的index.html 。 类似于以下内容：

app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function(req, res) {
    res.sendfile('./dist/index.html');
});

确保您的API请求与此不冲突。 如果可能，请共享一些代码，以便我们可以回顾可能出现的问题。