如何处理 react-router 子路由中抛出的异常答案

【问题标题】：How to handle exceptions thrown in react-router child routes如何处理 react-router 子路由中抛出的异常
【发布时间】：2017-04-27 08:30:13
【问题描述】：

我在使用 react-router@3.0.0 处理异常时遇到问题

我的路由器是这样连接的：

try {
  ReactDOM.render(<Router history={appHistory}>
    <Route path='/' component={Wrapper}>
      <Route path='bad' component={BadComponent}/>
    </Route>
  </Router>, domElement);
} catch(ex) {
  ReactDOM.render(<Exception ex={ex}/>, domElement);
}

我的问题是，如果 Wrapper 抛出渲染异常，我们最终会进入 catch 块。太好了！

如果Wrapper 工作正常，但BadComponent 抛出渲染异常，我们不会。嘘！

如果我们到达这一点，那么路由器将完全停止工作，我们无法导航到任何已知的良好路线。

react-router API 没有提到错误处理，所以我有点卡住了。

有没有办法让异常回到顶层，让它优雅地失败？

【问题讨论】：

我不认为有办法做到这一点。但我想知道......你为什么要捕获渲染异常？为什么不直接调试组件？
如果我打错字而不是帮助开发，更多的是关于用户体验。在组件中捕获异常并破坏整个渲染树似乎真的很脆弱，与我使用过的其他 React 库不同。当然，路由器应该记录并抛出？
我很确定您的要求是不可能的，除非您将每个组件都包装在 try catch 中。不过，在将构建推送到实际环境之前，您应该再次测试您的组件。

标签： javascript reactjs exception exception-handling react-router

【解决方案1】：

我知道这可能为时已晚，您可能已经找到解决方案，甚至不再使用此代码。

如果您还没有发现，请检查 react 提供的错误边界https://reactjs.org/docs/error-boundaries.html

【讨论】：