添加错误捕获页面

src/containers/ErrorCatch/ErrorBoundary.js

+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      error: error,
+      errorInfo: errorInfo,
+    });
+    // You can also log error messages to an error reporting service here
+  }
+
+  render() {
+    if (this.state.errorInfo) {
+      // Error path
+      return (
+        <div>
+          <h2>Something went wrong.</h2>
+          <details style={{ whiteSpace: 'pre-wrap' }}>
+            {this.state.error && this.state.error.toString()}
+            <br />
+            {this.state.errorInfo.componentStack}
+          </details>
+        </div>
+      );
+    }
+    // Normally, just render children
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/containers/Repair/index.js

@@ -3,6 +3,8 @@ import { Switch, Route, Redirect, NavLink } from 'react-router-dom';
 import styles from './style.css';
 import ReprtRepair from './ReprtRepair';
 import RepairList from './RepairList';
+import ErrorBoundary from '../ErrorCatch/ErrorBoundary';
+
 class index extends Component {
   constructor(props) {
     super(props);
@@ -30,6 +32,7 @@ class index extends Component {
   render() {
     const { showFooter } = this.state;
     return (
+      <ErrorBoundary>
         <div className="Content-Wrap">
           <div className="RepairContent">
             <Switch>
@@ -58,6 +61,7 @@ class index extends Component {
             </div>
           )}
         </div>
+      </ErrorBoundary>
     );
   }
 }