Оборачивание нескольких маршрутов реакции-маршрутизатора в границу ошибки - PullRequest
Новая
       22

Оборачивание нескольких маршрутов реакции-маршрутизатора в границу ошибки

0 голосов
/ 27 октября 2018

Как обернуть один или несколько маршрутов в компонент границы ошибки?Я использую React версии 16 и попытался обернуть два маршрута в границы ошибок, но у меня неожиданное поведение.

Я не получаю никаких сообщений об ошибках вообще, но один компонент иногда не монтируется.

При переключении между двумя маршрутами с использованием одного и того же дочернего компонента (формы) родительский компонент вообще не будет обновляться или монтироваться.URL-адрес в адресной строке веб-браузера обновляется правильно, хотя.(Я использую тот же дочерний компонент для добавления / редактирования, но с разными реквизитами)

Это проблема с ErrorBoundary?Мне нужно как-то проинструктировать?

Я прочитал документацию по реагированию на сайте, но не могу найти никакой информации по моей проблеме.Я пропускаю, как 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.

1 Ответ

0 голосов
/ 10 ноября 2018

Я обернул 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
    )
  )
  }/>
);
...