2
我使用服务器端渲染性能反应空的，但是从服务器我的客户端的diff，因为我的客户呈现第一<!-- react-empty: 1 -->，而不是组件和客户端检测到校验再经过是不同的重新呈现应用程序，所以我失去了表现。 Here我问哪里描述我的问题的问题，以及一些调试后，我发现，我在我的根组件阵营路由器打印客户端
render() {
let history = browserHistory;
if (this.props.store) {
history = syncHistoryWithStore(browserHistory, props.store)
}
return (
<Provider store={store}>
<Router history={history} routes={routes} />
</Provider>
);
}
Router元素的原因的问题时，我改变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);
}
}
]
}
]
};
我想我的代码是正确的，但如果我做错了，请帮助我！
在此先感谢。