如何在 ErrorBoundary 内重定向？

Question

我在我的 React 应用程序中使用 ErrorBoundary 并希望在发生错误时重定向到主页 - 但我的重定向不起作用。相反，应用程序停留在同一页面上。

相比之下，添加按钮允许用户在单击时切换页面。

但我想在发生错误时自动将用户带到那里。

肯定有一种简单的方法可以做到这一点，而我却没有。

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

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      error: error,
      errorInfo: errorInfo
    })
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.errorInfo) {
      return (
        <div>
          {/* <Button href="/index.html">Go Home</Button> */}
          <Redirect to="/index.html" />
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

我也试过返回一条没有运气的路线：

render() {
  if (this.state.errorInfo) {
    return (
      <Route path="/Home" component={Home} />
    );
  }

Answer 1

我假设您也在项目中使用 react-router-dom。

确保您的 ErrorBoundary 组件位于 index.js 或 App.js 文件的 BrowserRouter 包装器内。如果是这样，您只需将 ErrorBoundary 组件连接到 React 路由器，方法是

export default withRouter(ErrorBoundary);

确保导入正确

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

如果发生错误，您可以调用：

this.props.history.push('/'); // will forward you to wherever you want

这只会改变浏览器中的 url，具体取决于您需要调用的其他 ErrorBoundary

window.location.reload();

就在你推到历史之后。但这只是您配置 ErrorBoundary 以覆盖您的子道具时需要做的事情。

如何在 ErrorBoundary 内重定向？

How do I redirect within an ErrorBoundary?

reactjs

react-error-boundary