React router children caught in infinite loop - reactjs

Question

I am attempting to build out some nested routes with react-router.
My route are set up like so:
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<Route component={Main}>
<IndexRoute component={RepositoryList} />
<Route path="profile" component={Profile} />
</Route>
<Route path="login" component={Login} />
<Route path="admin" component={Admin} />
</Route>
</Router>
</Provider>
The App component connects the redux state and actions to the props of ViewWrapper with connect(mapStateToProps, mapDispatchToProps)(ViewWrapper).
ViewWrapper render method contains {React.cloneElement(this.props.children, this.props)} along with some other global elements.
Now Main contains the following:
render() {
return (
<div className={styles.main}>
<Banner {...this.props} />
{React.cloneElement(this.props.children, this.props)}
</div>
)
}
My understanding is that RepositoryList or Profile will be pulled into {React.cloneElement(this.props.children, this.props)} depending on which route is hit. This is where I am running into problems, there is an infinite loop which is producing the following error.
TypeError: Cannot read property '__reactInternalInstance$s50mbbsix2n2nxx9dg8gmbo6r' of null
My gut tells me that Main is trying to nest itself inside itself when passing this.props.
I feel like this must be a common problem but have had no luck finding solutions that work for my case, any help is appreciated.

Answer 1

A big thank you to #Yongzhi for pointing me in the right direction on this one.
Okay, so it turns out I had been using redux in the wrong manner. I was passing props to all children that required them through {...this.props} which was hooking every component up to absolutely everything in the store. At the time this seemed expensive but I just went with it. This meant that the children prop was getting overridden. And it was recursively nesting itself.
It turns out I should have been connecting each component to only the relevant parts of the store with react-redux's connect method. After that, simple using {this.props.children} worked for my nested components.
A complete example:
import React from 'react'
import { connect } from 'react-redux'
const Component = React.createClass({
render() {
return (
<div>
<p>{this.props.globals.heading}</p>
{this.props.children}
</div>
)
}
})
function mapStateToProps(state) {
return { globals: state.globals }
}
export default connect(mapStateToProps)(Component)
If anyone is in the same boat, read this page on the connect method and it will all become very clear.