强制react-router应用程序向服务器发送URL请求

Question

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

首次打开应用程序时，实际的 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 中自行处理它们？

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

编辑：我认为请求被反应路由器吞掉的假设是错误的。它是 create-react-app 框架中的 Service Worker。服务工作者公开了一个注销函数来解决我的问题。

Answer 1

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

这不是真的。手动更改地址栏（并按 Enter 键）后，您始终会首先访问服务器路由器。

很可能你的服务器，无论点击哪个 url，总是会渲染index.html包含你的 React 应用程序的服务器。与此类似的东西：

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

确保您的 API 请求与此不冲突。如果可能的话，分享一些代码，以便我们可以检查可能出现问题的地方。