Question

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

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

现在必须让ssr批准第一次渲染的速度。

根据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在异步组件回调之后开始渲染（这完全是关于第一次屏幕渲染），我可以解决这个问题。

谢谢！

react-router - 在ssr中使用异步组件进行动态路由（第一次屏幕渲染）

0 个答案: