Posted on Jan 25, 2019

ErrorBoundary does not re-render app when place below react-router

#help #reactrouter #react

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>