reactjs v18 当错误展示错误边界的时候点击按钮进行 navigate 跳转就不起作用了是什么原因怎么修改

这个问题可能是由于 React v18 中的错误边界行为发生了变化所导致的。在 React v18 之前，错误边界组件会阻止错误继续传播，但在 v18 中，错误会被传播到组件树的根部。

为了修复这个问题，你可以尝试以下几种方法：

使用 React v18 中的新特性 ErrorBoundary 组件来处理错误。你可以在错误边界组件中使用 ErrorBoundary 组件来捕获错误并展示错误信息，然后在 componentDidCatch 方法中进行导航跳转。

import { ErrorBoundary } from 'react';
import { useHistory } from 'react-router-dom';

function ErrorBoundaryComponent({ children }) {
  const history = useHistory();

  function handleNavigate() {
    history.push('/path'); // 进行导航跳转
  }

  return (
    <ErrorBoundary
      fallbackRender={({ error }) => (
        <div>
          <p>出现错误：{error.message}</p>
          <button onClick={handleNavigate}>跳转</button>
        </div>
      )}
    >
      {children}
    </ErrorBoundary>
  );
}

在错误边界组件中使用 componentDidCatch 方法捕获错误，并在该方法中进行导航跳转。

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

class ErrorBoundaryComponent extends Component {
  componentDidCatch(error, errorInfo) {
    // 处理错误
    this.props.history.push('/path'); // 进行导航跳转
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(ErrorBoundaryComponent);

请注意，以上代码中的导航跳转需要使用 React Router 或其他路由库提供的相关功能。

希望能帮助到你

reactjs v18 当错误展示错误边界的时候点击按钮进行 navigate 跳转就不起作用了是什么原因怎么修改