CODEWITHSUNDEEP
reactjs
CrazyCSGuy
CrazyCSGuy

Reputation: 143

How to refresh react page after error handling

I have the following:

<ErrorBoundary>
      <NavBar />
</ErrorBoundary>


<ErrorBoundary>
        <Switch>
          <Route exact path="/" component={mainPage} />
          <Route exact path="/" component={buyerPage} />
          <Route exact path="/" component={sellerPage} />
        </Switch>
</ErrorBoundary>

<ErrorBoundary>
      <Footer />
</ErrorBoundary>

The error occurs in buyerPage: http://localhost:3000/#/buyer. But the Navbar and Footer components still loads(what I want). When I click Seller from the Navbar, the page link goes to http://localhost:3000/#/seller but the error still shows up unless I manually refresh the page(then it shows the contents of seller page).

Is there a way to automatically refresh the page when we click away from the error page (buyer page in my case)?

Here's my ErrorBoundary code:

render() {
        if(this.state.hasError){
            return (
                <div style={errorStyle}>
                     <h2>Something went wrong</h2>
                </div>
            )
        }
        else{
            //refers to the component we are actually rendering
            return (this.props.children);
        }
    }

Upvotes: 0

Views: 3040

Answers (1)

k-wasilewski
k-wasilewski

Reputation: 4613

Inside your ErrorBoundary clear the hasError on component update:

componentDidUpdate(previousProps, previousState) {
    if (previousProps.children!==this.props.children)
        this.setState({hasError: false});
}

Upvotes: 5

Related Questions