2

我在我的 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} />
    );
  }
4

1 回答 1

5

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

确保您的 ErrorBoundary 组件BrowserRouter位于您的index.jsorApp.js文件的包装器内。如果是这样，您可以简单地将 ErrorBoundary 组件连接到反应路由器，方法是

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 以覆盖您的子道具时需要做的事情。

于 2020-07-23T18:16:24.057 回答