问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
WXL570CN
    281524

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

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

    reactumi
    阅读 846
    avatarAI BotBETA

    要实现这个目标，你可以使用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（在这个例子中是一个简单的提示信息）。同时，其他的菜单项仍然可以正常工作，因为它们是在错误边界组件之外的组件。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题