Why this pass props into this.props.children doesn't work?

Question

I tried to pass in props to this.props.children using the following code

export default class Home extends Component {
     render(){
var children = React.Children.map(this.props.children, function (child) {
return React.cloneElement(child, {
  foo: "1"
})
});
       return(            
         <div className="bla">
            <h1>WeDate</h1>
            <div className="child">
             {children}
        </div>)
     }

}

But I can't read this.props.foo in my searchDate component when it renders normally. The following is my react router.

render(
    <Router>
        <Home>
            <Switch>
                <Route exact path="/"><Redirect to="/search" push/></Route>
                <Route exact path="/search" component={SearchDate}></Route>
            </Switch>
        </Home>
    </Router>
    ,document.getElementById('app')
);

Answer 1

the children to your Home component are not the Routes but the Switch and hence foo is not passed down as props to the respective components. What you need to do is to nest your Routes is the Home component and not as children

Home

export default class Home extends Component {
     render(){
       return(            
         <div className="bla">
            <h1>WeDate</h1>
            <div className="child">
             <Switch>
                <Redirect from="/" exact to="/search"/>
                <Route exact path="/search" render={(props) => <SearchDate foo={'1'} {...props}/>}>
            </Switch>
        </div>)
     }

}

Routes

render(
    <Router>
        <Home />
    </Router>
    ,document.getElementById('app')
);