Webpack 2代码与服务器端渲染和React-Router-v4分离

使用webpack2.2.0-rc1并响应routerv4,并使用这个要点使代码分裂工作,这说明以下

function asyncComponent(getComponent) { return class AsyncComponent extends React.Component { static Component = null; state = { Component: AsyncComponent.Component }; componentWillMount() { if (!this.state.Component) { getComponent().then(Component => { AsyncComponent.Component = Component this.setState({ Component }) }) } } render() { const { Component } = this.state if (Component) { return <Component {...this.props} /> } return null } } } const Foo = asyncComponent(() => System.import('./Foo').then(module => module.default) ) 

它实际上工作,但我使用服务器端渲染。 因此,在服务器上我需要组件A,然后在客户端上我System.import组件A.最后,当我访问延迟加载的路由时,我得到这个反应重用标记警告,因为客户端呈现最初从https://gist.github .com / acdlite / a68433004f9d6b4cbc83b5cc3990c194#file-app-js-L21加载组件A. Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) CO 0.0.0 </h1></div><!-- react-empty: 6 - (server) CO 0.0.0 </h1> </div><div data-radium="tru Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) CO 0.0.0 </h1></div><!-- react-empty: 6 - (server) CO 0.0.0 </h1> </div><div data-radium="tru

我怎样才能使这个工作没有错误?

我刚刚改变了AsyncComponent的这一行 ,使它返回一个刹车标签
而代码分离的组件还没有加载。然后,而不是要求实际组件渲染服务器端,我只是抛出另一个制动标签,所以标记实际上匹配。

这远非理想

 export function Shell(Component) { return React.createClass({ render: function () { return ( <div> <Bar/> <Component {...this.props}/> </div> ); } }); }; export const Waiting = React.createClass({ render: function () { return ( <div> <Bar/> <br/> </div> ); } }); // Client routes const AsyncDash = Utils.asyncRoute(() => System.import("../components/dashboard/dashboard.tsx")); const AsyncLogin = Utils.asyncRoute(() => System.import("../components/login/login")); const routes = () => { return (<div> <Match exactly pattern="/" component={Shell(AsyncLogin)}/> <Match exactly pattern="/dashboard" component={Shell(AsyncDash)}/> </div> ); }; // Server routes const routes = () => { return (<div> <Match exactly pattern="/" component={Waiting}/> <Match exactly pattern="/dashboard" component={Waiting}/> </div> ); }; 
Interesting Posts