reactjs - 服务器端渲染后的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