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

标签 reactjs error-handling react-router isomorphic-javascript

我正在为我的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/

    相关文章:

    javascript - react native : set headers with the Linking api

    reactjs - 无法将 API 响应数据映射到 typescript 接口(interface)

    javascript - React fetch 给我一个 chop 的 JSON 响应

    node.js - Express React cookie 问题

    php mysql错误处理显示在错误页面的错误中

    php - PHP自定义错误处理程序

    javascript - ReactJS:具有多个 View 的侧边栏

    ruby - 从可能未定义的错误中解救

    reactjs - 当使用react-router-dom v6时,我还需要这个@types/react-router-dom包吗?

    javascript - 在React路由器中,onEnter与onLeave相同