Question

如何在错误边界组件中包装一条或多条路线？我正在使用React版本16并尝试在错误边界中包装两条路由，但遇到了一些意外的行为。

我根本没有收到任何错误消息-但是有时无法安装一个组件。

使用相同的子组件（窗体）在两条路线之间切换时，父组件将根本不会更新或安装。但是，Web浏览器位置栏中的URL会正确更新。（我使用相同的子组件进行添加/编辑，但使用了不同的道具）

这是ErrorBoundary的问题吗？我需要以某种方式进行指导吗？

我已经阅读了reactjs.org上的文档，但是找不到有关我的问题的任何信息。我是否错过了ErrorBoundary应该如何工作？

很高兴您能带领我朝正确的方向解决此问题。

请参见下面的简单代码示例。

export const history = createHistory();
const AppRouter = () => (
<Router history={history}>
  <div>
    <PrivateRoute component={Header} />
    <Switch>
      <PrivateRoute path="/dashboard" component={DashboardPage} />

      <ErrorBoundary key="eb01">
        <PrivateRoute path="/category/edit_category/:id" component={EditCategoryPage} exact={true} />
      </ErrorBoundary>

      <ErrorBoundary key="eb02">
        <PrivateRoute path="/create_category" component={AddCategoryPage} exact={true} />
      </ErrorBoundary>
    </Switch>
  </div>
</Router>
);

错误边界组件

import React from 'react';

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

    const { history } = props;

    history.listen((location, action) => {
      if (this.state.hasError) {
        this.setState({
          hasError: false,
        });
      }
    });
  }

  componentDidCatch(error, errorInfo) {
    // Catch errors in any components below and re-render with error message
    this.setState({
      error: error,
      errorInfo: errorInfo
    })
    // You can also log error messages to an error reporting service here
  }

  render() {
    if (this.state.errorInfo) {
      // Error path
      return (
        <div>
          <h2>Something went wrong</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }
    // Normally, just render children
    return this.props.children;
  }
}
export default ErrorBoundary;

更新

我还尝试将组件-而不是路由-包装在ErrorBoundary组件中。

<PrivateRoute path="/category/edit_category/:id" 
  render={() => (
    <ErrorBoundary>
      <EditCategoryPage/>
    </ErrorBoundary>
  )}
exact={true}/>

我现在收到错误消息（组件已正确导入-我可以在同一文件中的其他位置使用它们）

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Answer 1

我已经将React-Router包装在自己的组件中。这就是为什么我的代码不起作用的原因！ doh！

在正确的位置（我自己的组件）添加ErrorBoundary时，一切正常。：）

export const PrivateRoute = ({
  isAuthenticated, 
  component: Component,
  useErrorBoundary, 
  ...rest
}) => (
  <Route {...rest} component = {(props) => (
    isAuthenticated ? (
      (useErrorBoundary) ?
        <div>
          <ErrorBoundary>
            <Component {...props} /> 
          </ErrorBoundary>
        </div>
      :
        <div>
          <Component {...props} /> 
        </div>
    ) : (
      <Redirect to="/" /> //redirect if not auth
    )
  )
  }/>
);

在错误边界中包装多条反应路由器路由

1 个答案: