Couldn't pass root component props to children components - reactjs

Question

I'm fairly beginner in react/redux, and I'm creating a simple project using React, Redux and React Router v4. I use Redux to handle the state and it sucessfully passes states to root component Wrapper, but it seems it doesn't pass it to Home or other components.
When I console log this.props.Gallery in Wrapper, the data displays but when I do it on Gallery, it shows 'undefined'. I've passed children in Wrapper using React.cloneElement but it didn't work. Is there an explanation to this and some workaround?
My app project structure is
--wrapper
-home
-gallery
-about
-links
Here are the components
For Routing
App.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Wrapper from './components/Wrapper';
...
//import store
import {Provider} from 'react-redux'
import store , {history} from './store'
//router
const mainRouter=(
<Provider store={store} history={history}>
<Wrapper>
<BrowserRouter>
<Switch>
<Route exact path='/' component={ Home } />
<Route path='/portfolio' component={ Gallery } />
<Route path='/about' component={ About } />
<Route path='/links' component={ Links } />
</Switch>
</BrowserRouter>
</Wrapper>
</Provider>
)
ReactDOM.render(mainRouter, document.getElementById('root'))
Wrapper
import React from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import * as actionCreators from '../actions/actionCreators'
function mapStateToProps(state){
return{
gallery:state.gallery
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators(actionCreators,dispatch)
}
class Wrapper extends React.Component{
render(){
return(
<div>
{React.cloneElement(this.props.children, this.props)}
</div>
)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Wrapper)
Home.js
import React from 'react'
import { NavLink } from 'react-router-dom'
//import component
...
class Home extends React.Component {
render(){
console.log(this.props.gallery)
return(
<div>
<p>this is home page</p>
<Header/>
<Nav/>
<Footer/>
</div>
)
}
}
export default Home;
Update 9/19
I've managed to created nested components in react router v4, but still unable to pass props to its direct children. It throws an error of children being undefined
And i've also updated my component structure to
--Home ~ this is more like a welcome containing app's menu
--Wrapper
-gallery
-about
-links
Here is what I did: I've moved Wrapper to be wrapper of gallery, about and links
App.js
<Provider store={store} history={history}>
<BrowserRouter>
<div>
<Route exact path="/" component={Home}/>
<Route path="/h" component={Wrapper}/>
</div>
</BrowserRouter>
</Provider>
Wrapper.js
function mapStateToProps(state){
return{
gallery:state.gallery
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators(actionCreators,dispatch)
}
class HomePage extends React.Component {
render() {
return(
<div>
<Route path={`${this.props.match.path}/portfolio`} component={ Gallery } />
<Route path={`${this.props.match.path}/about`} component={ About } />
<Route path={`${this.props.match.path}/links`} component={ Links } />
</div>
)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Wrapper)

Answer 1

You are correctly passing the props from Wrapper down to it's children. However, Home and Gallery are not it's children. They are great great grand children. The only child of Wrapper is the element(s) directly within it. In this case, that is BrowserRouter.
There are a great number of ways that you could make these props available to Home and Gallery. But passing directly from Wrapper is not one of them.
The simplest way would be to make a GalleryContainer class. This would be identical to the Wrapper class you already created (include it's connections to redux), except that it would explicitly render Gallery, as such;
render() {
return <Gallery {...this.props}/>;
}
Then use this new GalleryContainer as the component for the /portfolio route.

Answer 2

I finally managed to pass the props to child components.
I created two containers for my project, one as main container and other as parent to sub components Gallery, About and Links.
Here is structure in App.js
const mainRouter=(
<Wrapper>
<Provider store={store} history={history}>
<BrowserRouter>
<div>
<Route exact path="/" component={Home}/>
<Route path="/h" component={Container}/>
</div>
</BrowserRouter>
</Provider>
</Wrapper>
)
Then in Container, I connected it to redux, and created route to its sub children components and used render to render the components and pass gallery props to Gallery
<Route path={`${this.props.match.path}/portfolio`} render={()=><Gallery {...this.props.gallery}/>}/>
Here is the Container
import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as actionCreators from '../actions/actionCreators'
import { Route } from 'react-router-dom'
//import components
...
function mapStateToProps(state) {
return {
gallery: state.gallery
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch)
}
class Container extends React.Component {
render() {
return (
<div>
<ResponsiveNav/>
<main>
<Route path={`${this.props.match.path}/portfolio`}
render={ ()=><Gallery{...this.props}/> } />
<Route path={`${this.props.match.path}/links`}
render={ ()=><Link{...this.props}/> } />
<Route path={`${this.props.match.path}/about`}
render={ ()=><About{...this.props}/> } />
</main>
<Footer/>
</div>
)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Container)