React-router stops working when error boundary catches an error in route

Question

The codepen linked to below, uses react-router and an error boundary to catch errors within each route.

If you click on "Shop", the error is caught as expected, but the other links then no longer works. What's going on here? Why does react-router-dom seemingly stop working? What is the "correct" way to do this? Is it a problem with the <ErrorBoundary> component, or the way the route components are wrapped, or? 🤔

https://codepen.io/mpontus/pen/NyKNoL

In case something happens to the codepen link:

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 <h1>An error has occured.</h1>;
    }

    return this.props.children;
  }
}

const HomeScreen = () => <h3>Home</h3>;

const ProfileScreen = () => <h3>Profile Screen</h3>;

const ShopScreen = () => {
  throw new Error("Error during render");
};

const App = () => (
  <BrowserRouter>
    <div className="container">
      <nav className="nav nav-pills">
        <NavLink exact className="nav-link" activeClassName="active" to="/">
          Home
        </NavLink>
        <NavLink className="nav-link" activeClassName="active" to="/profile">
          Profile
        </NavLink>
        <NavLink className="nav-link" activeClassName="active" to="/shop">
          Shop
        </NavLink>
      </nav>
      <Switch>
        <Route
          exact
          path="/"
          render={() => (
            <ErrorBoundary>
              <HomeScreen />
            </ErrorBoundary>
          )}
        />
        <Route
          path="/profile"
          render={() => (
            <ErrorBoundary>
              <ProfileScreen />
            </ErrorBoundary>
          )}
        />
        <Route
          path="/shop"
          render={() => (
            <ErrorBoundary>
              <ShopScreen />
            </ErrorBoundary>
          )}
        />
      </Switch>
    </div>
  </BrowserRouter>
);

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

Matt Carlotta · Accepted Answer · 2020-02-12 23:16:49Z

7

In short, since you're reusing the ErrorBoundary for each route, it's never unmounted (this is by design). As such, its hasError state persists across each route.

You can mitigate this by updating the state when the location changes within the ErrorBoundary component:

  componentDidUpdate(prevProps) {
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({ hasError: false });
    }
  }

Since you're using the render prop, you'll have to manually pass the route props to the ErrorBoundary component:

For example:

<Route
  exact
  path="/"
  render={props => (
    <ErrorBoundary {...props}>
      <HomeScreen {...props} />
    </ErrorBoundary>
  )}
/>

Working demo (since this codesandbox is in development, it'll show an error overlay, so you'll have to close the error window to continue):

answered Feb 12, 2020 at 23:16

Matt Carlotta

19.8k5 gold badges42 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shahrooz bazrafshan · Accepted Answer · 2022-04-17 12:08:02Z

for the record, I think if you don't want to have issue of error state remain after changing route & define error boundary on each route in r.r v6, you can solve it like below:

a: define variable to save prev location:

  constructor(props) {
        super(props);
        this.state = { error: null, errorInfo: null };
        this.prevPath = null;
  }

  static getDerivedStateFromError(error) {
    return { error: true, errorInfo: error };
  }

b: set current location on component did mount

  componentDidMount() {
    this.prevPath = window.location.pathname;
  }

c: and finally did update should be like this:

  componentDidUpdate() {
    if (window.location.pathname !== this.prevPath)
      this.setState({ error: null, errorInfo: null });
    this.prevPath = window.location.pathname;
  }

d: wrap outlet like this:

  <ErrorBoundry>
    <Outlet />
  </ErrorBoundry>

Collectives™ on Stack Overflow

React-router stops working when error boundary catches an error in route

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related