getChildRoutes block parent rendering - react-router

Question

I've tried using setTimout ( 10 sec ) in getChildRoutes to simulate low latency network. let say www.example.com/user, I got server side rendering on "/user" path. when I access /user, I got blank page instead of the page from server side rendering, then after 10 sec, I get my page rendering.
var routes = [{
path: '/',
component: App,
indexRoute: { component: DashBoardPage },
getChildRoutes(location, cb) {
if (typeof window !== 'undefined') {
console.log("set sleep");
setTimeout(function () {
var test = [{path: 'about', component: DashBoardPage},
{path: 'feed', component: FeedChannelPage},
{path: 'host', component: HostPage},
{path: 'user', component: UserPage}];
console.log("location is " + location);
cb(null, test);
}, 10000);
}else{
var test = [{path: 'about', component: DashBoardPage},
{path: 'feed', component: FeedChannelPage},
{path: 'host', component: HostPage},
{path: 'user', component: UserPage}];
console.log("location is " + location);
cb(null, test);
}
}
}]
export default routes;
This my App.jsx
class App extends React.Component {
render () {
return (
<div id="wrapper">
<nav className="navbar navbar-default navbar-static-top" role="navigation" style={{marginBottom: 0}}>
<div className="navbar-header">
<a className="navbar-brand" href="index.html">SB Admin v2.0</a>
</div>
<div className="navbar-default sidebar" role="navigation">
<div className="sidebar-nav navbar-collapse">
<ul className="nav" id="side-menu">
<li className="sidebar-search">
<div className="input-group custom-search-form">
</div>
</li>
<li>
<Link to="/about"><i className="fa fa-dashboard fa-fw"></i> Dashboard</Link>
</li>
<li>
<Link to="/host"><i className="fa fa-dashboard fa-fw"></i> Host</Link>
</li>
<li>
<Link to="/user"><i className="fa fa-dashboard fa-fw"></i> User</Link>
</li>
</ul>
</div>
</div>
</nav>
<div id="page-wrapper" style={{'minHeight':'400px'}}>
{this.props.children}
</div>
</div>
)
}
}