React-Loadable仅创建第一个组件块

时间:2018-02-28 06:35:12

标签: reactjs react-loadable

我真的不明白为什么我在创建反应应用程序构建中的代码拆分时遇到React-Loadable这样的问题。 我正在尝试通过路由分割代码,并遵循文档和其他地方提到的基本规则,但只生成第一个组件块,而不是生成所有组件块。 请在此建议您的解决方案或要点。

public class TCoactivitiesPinan extends BaseEntity implements Serializable {
private static final long serialVersionUID = 2007524284;
private Integer   id;
private String    openid;
private String    tel;
private Timestamp createdtime;
private String createdtime_start; //  创建时间_开始时间
private String createdtime_end; //  创建时间_结束时间
private Integer   checkstate;
...
}

以下是可反应加载的组件

const MainRoute = () => (
<div> 
<Switch>
     <Route exact path="/" component={LoadableClientLogin} />
     <Route exact path="/apply" component = {LoadableApply}/> 
     <Route exact path="/new_application" component = 
{LoadableAddNewApplication}/> 
     <Route path="*" component={LoadableClientLogin} /> 
</Switch>  
</div>)

1 个答案:

答案 0 :(得分:1)

react-loadable的文档中,SSR部分的末尾有一段文字:

  

在客户端上预加载就绪的可加载组件   我们可以在客户端上使用Node* coverNode = NULL; ... coverNode->leftChild = (struct Node*)newNode; 方法来预加载页面中包含的可加载组件。

     

Loadable.preloadReady()一样,它返回一个promise,从分辨率上来说,这意味着我们可以为我们的应用程序添加水分。

这意味着为了生成两者:

1)第一层组件(LoadableClientLogin)

2)第二层组件(clientLogin)

您需要:

1)像已经将第二层组件包装到Loadable中一样

2)将Loadable.preloadAll()ReactDOM.hydrate包装在ReactDOM.render中。例如,请参见以下代码块(来自react-loadable文档中的代码)

Loadable.preloadAll()