0

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

我根本没有收到任何错误消息 - 但一个组件有时不会挂载。

当使用同一个子组件（表单）在两条路由之间切换时，父组件根本不会更新或挂载。但是，Web 浏览器位置栏中的 URL 会正确更新。（我使用相同的子组件进行添加/编辑，但使用不同的道具）

这是错误边界的问题吗？我需要以某种方式指导它吗？

我已阅读 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.
4

1 回答 1

0

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

在正确的位置（我自己的组件）添加 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
    )
  )
  }/>
);
于 2018-11-10T11:54:36.633 回答