几个月前,我使用react-router成功构建了一个带有异步组件的spa应用程序 .

但是当我第一次打开页面时它太慢了(因为资源的大小,即使代码分割和异步加载)

现在重要的是让它成为第一个渲染的速度 .

根据api文档完成服务器端渲染工作后出了点问题 . 当我打开我的页面时,警告如下:

(client) " data-reactid="1"><!-- react-empty: 2 -
 (server) " data-reactid="1"><div class="Detail_mo

并且在真实渲染之间发生闪光 .

认为它是由异步组件引起的(在react-router的第一次渲染之后完成) .

现在我删除组件的异步加载器,然后一切都成真,没有任何警告!

Routes.js

module.exports = {
path: '/',
getChildRoutes:(location,callback)=>{
    callback(null,[
        {
            path: 'item.html',
            getComponent: (nextState, cb)=>{
                console.log('Detail start')
                const Detail = require('react-router-proxy?name=item!../detail/dev/js/detail/container/RootContainer')
                cb(null,Detail)
            }
        },
        {
            path: 'home',
            getComponent: (nextState, cb)=>{
                const Home = require('react-router-proxy?name=home!../home/dev/js/container/RootContainer');
                cb(null,Home)
            }
        },
        {
            path: 'user',
            component: require('react-router-proxy?name=user!../home/dev/js/container/RootContainer')
        },
    ]);
}
};

如果可以为initComponent设置异步和动态组件,或者让react-router在异步组件回调之后开始渲染(这是关于第一次屏幕渲染),我可以解决这个问题 .
谢谢!