React this.props.children is undefined - reactjs

Question

I have the following router config:
ReactDOM.render((
<Router history={History.createHistory()}>
<Route path="/" component={Page}>
<IndexRoute component={OverviewDashboard}/>
<Route path="/:env" component={Env}>
<IndexRoute component={EnvOverview}/>
</Route>
</Route>
</Router>
), document.getElementById('page'));
and the following component definitions:
const Page = React.createClass({
render: function () {
return (
<main>
<Header />
{this.props.children}
</main>
);
}
});
const OverviewDashboard = React.createClass({
render: function () {
return (
<section>
<Env name="Env1" />
<Env name="Env2" />
</section>
);
}
});
const Env = React.createClass({
render: function() {
return (
<section className="env">
<header>{this.props.params && this.props.params.env || this.props.name}</header>
{this.props.children}
</section>
);
}
});
const EnvOverview = React.createClass({
render: function() {
return (
<div>
<Jobs env={this.props.params.env}/>
<Runtime env={this.props.params.env}/>
</div>
)
}
});
I've ommitted the definitions of <Header>, <Jobs> and <Runtime> because they are not relevant.
When i go to / link {this.props.children} within <Env> component is undefined and thus not rendered.
However when I go to "/Env1" {this.props.children} is set to <EnvOverview> correctly and displayed.
I am new to React and probably I am using the routing component incorrectly. Could someone explain how do I render <EnvOverivew> also when accessing / link ?

Answer 1

When you go to /Env, react-router renders your /:env route, whose component is Env. Inside this route, you have an IndexRoute. This IndexRoute renders the EnvOverview component as its parent route children. Thus, you get {this.props.children} on this case.
When you enter the / route, it triggers your IndexRoute inside App, whose component is OverviewDashboard. It doesn't enter the /:env route because you didn't provide a parameter to match :env.
Inside your OverviewDashboard, you are manually rendering two Envs, without providing their children (check this). Thus, inside these two Envs, {this.props.children} equals undefined.
I don't know what your requirements are, but you could change the OverviewDashboard render method to this:
render: function () {
return (
<section>
<Env name="Env1"><EnvOverview name="Env1" /></Env>
<Env name="Env2"><EnvOverview name="Env2" /></Env>
</section>
);
}
And inside EndOverview render method, change env={this.props.params.env} to env={this.props.params.env || this.props.name}.
I don't know if it's the best solution to your case, but I hope why {this.props.children} was undefined is clarified ;)