Как выполнить перенаправление в пределах ErrorBoundary?

Question

Я использую ErrorBoundary в своем приложении React и хочу перенаправить на главную страницу при возникновении ошибки, но мое перенаправление не работает. Вместо этого приложение остается на той же странице.

Для сравнения: добавление кнопки позволяет пользователю переключать страницы при нажатии на нее.

Но вместо этого я хочу автоматически перенаправить пользователя туда при возникновении ошибки.

Конечно, должен быть простой способ сделать это, который мне не хватает.

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} />
    );
  }

Answer 1

Я предполагаю, что вы также используете react-router-dom внутри вашего проекта.

Убедитесь, что ваш компонент ErrorBoundary находится внутри BrowserRouter обертка в вашем index.js или App.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 для перезаписи дочерних свойств.