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

Question

使用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,然后在客户端I System.import组件A.当我访问延迟加载的路由时,我得到这个反应重用标记警告,因为客户端呈现最初从https://gist.github加载null .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

如何在没有错误的情况下完成这项工作？

Answer 1

我刚刚更改了 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>
    );
};