Connected-react-router: Infinite re-mounting when dispatching in componentDidMount of a route component

[allimuu]

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.

[bugzpodder]

Can you remove the beta and install latest for both this library and react redux?

[allimuu]

Yep sorry, I've tried with @latest of all 3 packages:

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

Same issue.

[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:

[maamounapprise]

@supasate i am also facing same issue, it's rerendering for inifinity, tried v 5 didn't work at all even

[madsmadsen]

I have the exact same issue, I'm running the latest version of connected-react-router and react-redux.

After a bit of debugging and reading https://github.com/supasate/connected-react-router/issues/205#issuecomment-446710683 I changed my <Route component={MyComponent} /> into <Route render={(_props) => <MyComponent />} /> the issue went away.

Now I didn't stop there, I went back, and tried adding a shouldComponentUpdate method to ConnectedRouter.js's ConnectedRouter Class and made it return false, now using the component prop on <Route /> worked as expected.
I checked the arguments for shouldComponentUpdate (nextProps, nextState and nextContext) and they didn't seem to differ from this.props, this.state or this.context.

That's how far I got, not sure what triggers the update, but something is

[cevr]

I'm having the same issue, however I cannot seem to resolve it with what @madsmadsen proposed...

Any updates?

[alexhoo]

Same issue here regarding infinite component mount

[supasate]

It should be fixed in v6.1.0. Please let me know if it helps and feel free to re-open this issue if the problem still exists.

[simontong]

I'm still getting the issue.

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

[supasate]

@simontong Can you provide a minimal repo that can reproduce the issue?

[rezamirzapour]

I still have this problem🤦‍♂️

[sidhardha2705]

@madsmadsen I still have this problem with redux and with react-hooks ( useReducer ) as well

"react-redux": "^7.1.3",

but this solved the problem :
<Route key={page.id} path={/${page.slug}} render={props => <PageTemplate {...props} data={page} />} />

Thank you!

[alex198710]

I had the same problem, I suspect the <Redirect/> component to produce this infinite loop.
By removing this component of my code, I no longer have the problem

[dmibog]

I faced this issue when was upgrading from react 16.6 to 16.13.1. Actually I had to upgrade react-redux and as result took the latest version of connected-react-router which is 6.8.0. I fixed it by rolling back to 6.6.1 (the nearest broken is 6.7.0). I checked the changes and noticed that stateInStore !== stateInHistory check was added at https://github.com/supasate/connected-react-router/blob/v6.7.0/src/ConnectedRouter.js#L48