getChildRoutes阻止父渲染

时间:2015-11-05 15:32:28

标签: react-router

我已尝试在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>
    )
}
}

0 个答案:

没有答案