React 오류 경계가 호출되지만 렌더링되지 않습니다.

복제를 위해이 코드 및 상자를 참조하십시오

앱을 /error경로로 리디렉션하는 오류 경계를 만들었습니다 . 그러나 때때로 오류가 발생하면 (버그 페이지 링크를 클릭하여 코드와 상자의 경우) 오류 경계가 호출되고 브라우저가 /error경로 로 리디렉션 되지만 표시되어야하는 구성 요소가 표시 /error되지 않습니다. 렌더링하고 대신 흰색 화면이 표시됩니다. 무엇이 잘못되었으며, 오류 경계가 호출되어 브라우저를 리디렉션하지만 렌더링이 완료되지 않는 이유는 무엇입니까? 감사!

index.js :

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { render } from "react-dom";
import ErrorBoundary from "./errorBoundary";
import "./index.css";

const App = () => (
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/bug">Page with Bug</Link>
        </li>
      </ul>
    </nav>
    <Switch>
      <Route path="/bug">
        <BugPage />
      </Route>
      <Route path="/error">
        <ErrorPage />
      </Route>
      <Route path="/">
        <HomePage />
      </Route>
    </Switch>
  </div>
);

const HomePage = () => <h1>Home Page</h1>;

const ErrorPage = () => <h1>This is the error boundary</h1>;

const BugPage = () => {
  const dummyData = {
    foo: {
      id: 1
    }
  };

  return <h1>{dummyData.bar.id}</h1>;
};

const Spa = () => (
  <Router>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </Router>
);

render(<Spa />, document.getElementById("root"));

errorBoundary.js :

import * as React from "react";
import { withRouter } from "react-router-dom";

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

  componentDidCatch(error) {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      this.props.history.push("/error");
    }
    return this.props.children;
  }
}

export default withRouter(ErrorBoundary);