javascript - react 路由器。当容器(页面)出现任何错误时如何防止整个应用程序崩溃

Question

我有这样的代码

Simple code example

例如，如果“关于”页面有语法错误，整个应用程序就会崩溃。

1. 如何处理这种情况？
2. 路由必须位于单独的(配置)文件中，或者位于 index.js 文件中也可以
3. 在真正巨大的环境中使用 React Router 的最佳实践是什么 使用 browserHistory 的项目？可能是 git repo 上的一些模板或示例。

Answer 1

考虑使用您定义的 ErrorBoundary 组件来包含错误并显示友好的错误消息。如果您使用 React 16，这是推荐的方式:https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

<ErrorBoundary>
  <MyComponent/>
</ErrorBoundary>

参见 Dan Abramov 的演示:https://codepen.io/gaearon/pen/wqvxGa?editors=0010

此方法的优点是您可以选择希望错误冒泡的组件层次结构的几级。