Infinite re-mounting when dispatching in componentDidMount of a route component

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

After upgrading to latest connected-react-router and react-redux. When I mount a routed component that does a dispatch inside componentDidMount it gets into an infinite loop until eventually it hits the Maximum update depth exceeded error.

This only seems to happen inside a component that’s mounted through a route. I use the component prop on Route for all components.

What is the expected behavior?

It’s a simple action. And the action seems to be performed, so it’s expected to not re-mount in an infinite loop which is what I believe is going on. The same redux action works on any other component that is a parent of that Switch.

It also works fine with the standard Router from react-router-dom.

Which versions and which browser and OS are affected by this issue?

This is with @latest and @next of all 3:

"connected-react-router": "^6.0.0-beta.1",
"react-router-dom": "^4.4.0-beta.6",
"react-redux": "^6.0.0-beta.3",

or

"connected-react-router": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-redux": "^6.0.0",

I have tried with older versions of react-router and older and latest versions of redux, same issue.

Possible reason

This seems to only happen on a Routed component that is inside my second nested Switch. So my current app structure looks like:

App.js

<Provider store={store}>
     <ConnectedRouter history={history}>
            <Switch>
                   <Route path="/login" key="/login" exact component={Login} />
                   <Route component={authRoute(RoutedLayout)} locale={this.state.locale} />
            </Switch>
     </ConnectedRouter>
</Provider>

And RoutedLayout.js:

<div>
    ...
    <Layout>
    <SideMenu />
    ... etc.
         <Content>
              <Switch>
                    {Routes().routes.map((route) => (
                             <Route
                                   path={route.path}
                                   key={route.path}
                                   exact
                                   component={componentFactory(route.component)}
                               />
                     ))}
                     <Route
                              path="/403"
                              key="/403"
                              exact
                              component={PermissionDenied}
                       />
                       <Route component={authRoute(NotFound)} />
                 </Switch>
           </Content>
     </Layout>
</div>

So any Route component that is rendered in the RoutedLayout Switch will cause this issue if it dispatches from componentDidMount.

[allimuu]

This is what the console looks like and the error when it eventually hits the max, the component actually mounts just fine after that:

[simontong]

I’m still getting the issue.

Forward button does not seem to work anymore when I hit back.