Question

我正在一个项目上，我想知道的是如何检测组件中是否有错误并如何重定向到主页，或者在出现错误的情况下显示要重定向到主页的页面。以编程方式

Answer 1

您可以创建一个ErrorBoundary并将组件包装在ErrorBoundary中。在componentDidCatch组件的ErrorBoundary内部，您可以加载主页，也可以呈现适当的消息并链接以返回主页。

您的ErrorBoundary应该如下所示。

import React from "react";
import PropTypes from "prop-types";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    console.log(error, info);
  }
  //Render the error condition component
  render() {
    if (this.state.hasError) {
      return <h1>Unable to load this section of the page!!</h1>;
    } else {
      return this.props.children;
    }
  }
}
ErrorBoundary.propTypes = {
  children: PropTypes.object
};
export default ErrorBoundary;

然后将组件包装在错误边界内，如下所示。

 <ErrorBoundary>
     <MyComponent={props} />
 </ErrorBoundary>

您可以了解有关ErrorBoundary here

的更多信息

Answer 2

您需要在此处使用“ componentdidcatch（）”生命周期方法。

组件加载时检测React JS中的错误

2 个答案: