react.js - 如何在React + UMI项目中实现错误拦截并保持菜单可用?

Question

React + UMI页面由于前端代码bug（如空指针）导致报错，页面显示something wrong...，如何在报错的情况下使菜单仍可用，即报错情况下点击菜单仍能切到其他页面？

试了错误拦截，但错误拦截也只是显示预设的错误UI界面而已，点击菜单栏仍不可用，即无法跳转，地址栏虽然变了，但页面还是显示的错误页面。
我希望虽然页面报错了，但是也只是影响当前页面，而不会影响其他页面，切菜单仍可访问其他页面。

Answer 1

要实现这个目标，你可以使用React的错误边界组件。错误边界组件能够在其子组件树中捕获并处理JavaScript错误，使得即使在发生错误的情况下，页面也不会完全崩溃，而是能够保持部分功能。

首先，你需要创建一个错误边界组件。下面是一个简单的例子：

class ErrorBoundary extends React.Component {  constructor(props) {    super(props);    this.state = { hasError: false };  }  static getDerivedStateFromError(error) {    return { hasError: true };  }  componentDidCatch(error, errorInfo) {    console.error(error, errorInfo);  }  render() {    if (this.state.hasError) {      // You can render any custom fallback UI you want here      return <h1>Something went wrong.</h1>;    }    return this.props.children; // Render the child components  }}

然后，你可以将这个错误边界组件应用到你的应用的最外层，这样它就可以捕获所有子组件中的错误：

import React from 'react';import ReactDOM from 'react-dom';import { Router } from 'umi';import ErrorBoundary from './ErrorBoundary';import Menu from './Menu';import Page1 from './Page1';import Page2 from './Page2';import './index.css';const routes = [  { path: '/', component: Menu, exact: true },  { path: '/page1', component: Page1 },  { path: '/page2', component: Page2 },];ReactDOM.render(  <React.StrictMode>    <ErrorBoundary>      <Router {...routes} />    </ErrorBoundary>  </React.StrictMode>,  document.getElementById('root') as HTMLElement,);

这样，即使某个页面抛出了错误，错误边界组件会捕获这个错误，并显示一个备用的UI（在这个例子中是一个简单的提示信息）。同时，其他的菜单项仍然可以正常工作，因为它们是在错误边界组件之外的组件。