ErrorBoundary does not re-render app when place below react-router
My
Posted on January 25, 2019
I am adding ErrorBoundary to my app but I found that when I add ErrorBoundary below react-router, the app doesn't re-render on route change until I manually force refresh.
Here's the sample code. I'm using BrowserRouter here. I would like to understand why the order of placement is important here.
App doesn't re-render until force refresh
<Router>
<div className="app-shell">
<ErrorBoundary>
<Navbar />
<div className="app-main">
<Sidebar project={this.props.currentProject} />
<MainContentRouter />
</div>
<ToastContainer />
</ErrorBoundary>
</div>
<Router>
WORKS FINE
<ErrorBoundary>
<Router>
<div className="app-shell">
<Navbar />
<div className="app-main">
<Sidebar project={this.props.currentProject} />
<MainContentRouter />
</div>
<ToastContainer />
</div>
<Router>
</ErrorBoundary>
💖 💪 🙅 🚩
My
Posted on January 25, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.