如何在 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 组件位于BrowserRouter您的index.js或App.js文件的包装器内。如果是这样，您可以简单地将 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 来覆盖子 props 时需要做的事情。