服务器端渲染后的 React-Router 客户端错误处理

Question

我正在为我的 React 应用程序使用服务器端渲染，但我无法理解在出现问题时显示错误页面的逻辑。

例如：

• 用户请求/article/123
• 获取文章时出现问题
• 我想显示一个500 错误页面

服务器端部分很简单。我告诉 React-Router 为我的错误组件提供服务。到目前为止一切顺利。

但是当页面被提供时，客户端的 javascript 会被执行并接管渲染。 React-Router 查看 url /article/123 并加载显示文章的组件（但由于数据不存在而失败..）

有没有办法让客户端知道我们想要显示错误组件？

我能想到的唯一想法是：将错误添加到全局 redux 状态。在渲染组件之前，检查全局状态中是否存在错误并显示错误组件。但是这样做的缺点是您必须在所有组件中实现该检查逻辑。应该有一些更优雅的方法来解决这个问题..

Answer 1

有几种不同的方法可以实现客户端错误处理；我发现使用高阶组件效果最好。您将创建一个包装器组件来检查服务器响应中的错误。如果找到，则提供相应的错误页面。如果 HOC 未检测到错误，则提供用户最初请求的组件。

下面是关于如何实现 HOC 的一个很好的解释： https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e