反应路由器打印在客户端反应空

我使用服务器端渲染的性能,但我的客户端不同的服务器端,因为我的客户端渲染首先<!-- react-empty: 1 -->而不是组件,然后在客户端检测到校验和不同,它重新呈现应用程序,所以我失去了性能。 在这里,我问问题在哪里描述我的问题,并经过一些debugging后,我发现我的Router元素在我的根组件导致问题

 render() { let history = browserHistory; if (this.props.store) { history = syncHistoryWithStore(browserHistory, props.store) } return ( <Provider store={store}> <Router history={history} routes={routes} /> </Provider> ); } 

当我改变Router为简单的div元素它呈现div,但与路由器它不首先渲染我的元素,这将导致校验和不匹配和客户端重新呈现。

这是我的路线。 自从我使用延迟加载后,我已经写了这种方法。

 export default { component: App, path: '/', indexRoute: { onEnter: (nextState, replace) => { replace('/sneakpeak') } }, childRoutes: [ { path: '/', getComponent(location, cb) { import('./LightApp') .then(loadRoute(cb)) .catch(errorLoading); }, childRoutes: [ { path: '/sneakpeak', getComponent(location, cb) { import('./SneakPeak') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '/prespectives', getComponent(location, cb) { import('./Blog') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '/post(/:id)', getComponent(location, cb) { import('./Post') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: 'users/registration(/:token)', getComponent(location, cb) { import('./SignUp') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: 'users/password/reset(/:token)', getComponent(location, cb) { import('./PasswordReset') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: 'users/posts(/:tab)', getComponent(location, cb) { import('./PostManagement') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '/terms', getComponent(location, cb) { import('./Terms') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '/disclaimer', getComponent(location, cb) { import('./Disclaimer') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '/privacy', getComponent(location, cb) { import('./Privacy') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '/about', getComponent(location, cb) { import('./About') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '/faq', getComponent(location, cb) { import('./Faq') .then(loadRoute(cb)) .catch(errorLoading); } }, ] }, { path: '/', getComponent(location, cb) { import('./FinancialApp') .then(loadRoute(cb)) .catch(errorLoading); }, childRoutes: [ { path: 'symbol/list/:type(/:letter)', getComponent(location, cb) { import('./SymbolList') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: 'symbol/info/:symbol(/:tab)', getComponent(location, cb) { import('./Symbol') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: 'market(/:tab)', getComponent(location, cb) { import('./Market') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: 'account(/:tab)', getComponent(location, cb) { import('./Account') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '*', getComponent(location, cb) { import('./NoMatch') .then(loadRoute(cb)) .catch(errorLoading); } } ] } ] }; 

我认为我的代码是正确的,但如果我做错了,请帮助我!

提前致谢。

我发现问题,并回答了我以前的问题在这里基本上,如果应用程序签署延迟加载,你应该像这里描述的渲染Router组件。