reactjs 使用 ErrorBoundary 时出现错误展示 fallback 之后react-router 跳转就失效了

在 React 中使用 ErrorBoundary 组件时，如果发生错误并展示了 fallback UI，React Router 的跳转确实会失效。这是因为错误边界捕获了错误并阻止了事件冒泡，导致 React Router 无法接收到路由变化的事件。

要解决这个问题，你可以在 ErrorBoundary 组件中添加一个返回按钮，当用户点击它时，可以重新导航到指定的页面。以下是一个示例代码：

import React from 'react';
import { withRouter } from 'react-router-dom';

class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  handleBackClick = () => {
    this.props.history.push('/'); // 替换成你要跳转的路径
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>出错了！</h1>
          <button onClick={this.handleBackClick}>返回</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default withRouter(ErrorBoundary);

在上面的示例中，handleBackClick 方法使用 history.push 方法来跳转到指定的路径。你需要使用 withRouter 高阶组件将 ErrorBoundary 组件包装起来，以便它能够获取到 React Router 的 history 对象。

然后，你可以将 ErrorBoundary 组件包裹在需要捕获错误的组件或路由上，如下所示：

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <div>
      <ErrorBoundary>
        {/* 其他组件或路由 */}
      </ErrorBoundary>
    </div>
  );
}

export default App;

这样，当错误发生时，用户可以点击返回按钮重新导航到指定页面，而不会导致 React Router 失效