我正在为我的React应用程序使用服务器端渲染,但是当出现问题时,无法将逻辑包裹在显示错误页面的逻辑上。
例如:
/article/123
500
错误页面服务器端部分很简单。我告诉React-Router提供我的错误组件。到现在为止还挺好。
但是,在提供该页面时,将执行客户端javascript并负责呈现。 React-Router看到URL
/article/123
并加载显示该文章的组件(但是由于没有数据而失败。)是否可以让客户端知道我们要显示错误组件呢?
我唯一能想到的是以下几点:将错误添加到全局redux状态。在呈现组件之前,请检查该错误是否在全局状态下存在,然后显示该错误组件。.但是,这样做的缺点是,您必须在所有组件中实现该检查逻辑。应该有某种更优雅的方法来解决此问题。
最佳答案
有几种不同的方法可以实现客户端错误处理。我发现使用高阶组件最有效。您将创建一个包装器组件,以检查服务器响应中的错误。如果找到一个,则提供相应的错误页面。如果HOC未检测到错误,请为用户最初请求的组件提供服务。
这是有关如何实现HOC的很好的解释:
https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e
关于reactjs - 服务器端渲染后的React-Router客户端错误处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39294307/