title: React-router stops working when error boundary catches an error in route
body: <p>The codepen linked to below, uses <code>react-router</code> and an error boundary to catch errors within each route.</p>
  
  <p>If you click on "Shop", the error is caught as expected, <em>but</em> the other links then no longer works. What's going on here? Why does <code>react-router-dom</code> seemingly stop working? What is the "correct" way to do this? Is it a problem with the <code>&lt;ErrorBoundary&gt;</code> component, or the way the route components are wrapped, or? </p>
  
  <p><a href="https://codepen.io/mpontus/pen/NyKNoL" rel="nofollow noreferrer">https://codepen.io/mpontus/pen/NyKNoL</a></p>
  
  <hr>
  
  <p>In case something happens to the codepen link:</p>
  
  <pre><code>const { BrowserRouter, Switch, Route, NavLink } = ReactRouterDOM;
  
  class ErrorBoundary extends React.Component {
    state = { hasError: false };
  
    componentDidCatch(error, info) {
      this.setState({ hasError: true });
    }
  
    render() {
      if (this.state.hasError) {
        return &lt;h1&gt;An error has occured.&lt;/h1&gt;;
      }
  
      return this.props.children;
    }
  }
  
  const HomeScreen = () =&gt; &lt;h3&gt;Home&lt;/h3&gt;;
  
  const ProfileScreen = () =&gt; &lt;h3&gt;Profile Screen&lt;/h3&gt;;
  
  const ShopScreen = () =&gt; {
    throw new Error("Error during render");
  };
  
  const App = () =&gt; (
    &lt;BrowserRouter&gt;
      &lt;div className="container"&gt;
        &lt;nav className="nav nav-pills"&gt;
          &lt;NavLink exact className="nav-link" activeClassName="active" to="/"&gt;
            Home
          &lt;/NavLink&gt;
          &lt;NavLink className="nav-link" activeClassName="active" to="/profile"&gt;
            Profile
          &lt;/NavLink&gt;
          &lt;NavLink className="nav-link" activeClassName="active" to="/shop"&gt;
            Shop
          &lt;/NavLink&gt;
        &lt;/nav&gt;
        &lt;Switch&gt;
          &lt;Route
            exact
            path="/"
            render={() =&gt; (
              &lt;ErrorBoundary&gt;
                &lt;HomeScreen /&gt;
              &lt;/ErrorBoundary&gt;
            )}
          /&gt;
          &lt;Route
            path="/profile"
            render={() =&gt; (
              &lt;ErrorBoundary&gt;
                &lt;ProfileScreen /&gt;
              &lt;/ErrorBoundary&gt;
            )}
          /&gt;
          &lt;Route
            path="/shop"
            render={() =&gt; (
              &lt;ErrorBoundary&gt;
                &lt;ShopScreen /&gt;
              &lt;/ErrorBoundary&gt;
            )}
          /&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    &lt;/BrowserRouter&gt;
  );
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>