我已尝试在setTimout
中使用getChildRoutes
(10秒)来模拟低延迟网络。比方说www.example.com/user,我在"/user"
路径上获得了服务器端渲染。当我访问/user
时,我得到了空白页而不是服务器端渲染的页面,然后在10秒后,我得到了我的页面渲染。
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;
这是我的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>
)
}
}