添加错误捕获页面

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,34 +32,36 @@ class index extends Component {
   render() {
     const { showFooter } = this.state;
     return (
-      <div className="Content-Wrap">
-        <div className="RepairContent">
-          <Switch>
-            <Route path="/repair/ReprtRepair" component={ReprtRepair} />
-            <Route path="/repair/RepairList" component={RepairList} />
-            <Route render={() => <Redirect to="/repair/ReprtRepair" />} />
-          </Switch>
-        </div>
-        {showFooter && (
-          <div className={styles.footer}>
-            <NavLink
-              className={styles['footer-item']}
-              to="/repair/ReprtRepair"
-              replace
-            >
-              报修服务
-            </NavLink>
-            <span className={styles.line} />
-            <NavLink
-              className={styles['footer-item']}
-              to="/repair/RepairList"
-              replace
-            >
-              报修记录
-            </NavLink>
+      <ErrorBoundary>
+        <div className="Content-Wrap">
+          <div className="RepairContent">
+            <Switch>
+              <Route path="/repair/ReprtRepair" component={ReprtRepair} />
+              <Route path="/repair/RepairList" component={RepairList} />
+              <Route render={() => <Redirect to="/repair/ReprtRepair" />} />
+            </Switch>
           </div>
-        )}
-      </div>
+          {showFooter && (
+            <div className={styles.footer}>
+              <NavLink
+                className={styles['footer-item']}
+                to="/repair/ReprtRepair"
+                replace
+              >
+                报修服务
+              </NavLink>
+              <span className={styles.line} />
+              <NavLink
+                className={styles['footer-item']}
+                to="/repair/RepairList"
+                replace
+              >
+                报修记录
+              </NavLink>
+            </div>
+          )}
+        </div>
+      </ErrorBoundary>
     );
   }
 }