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

Question

使用 webpack2.2.0-rc1 和 react routerv4，并使用 gist 使代码拆分工作，其中说明如下

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 加载 null 在加载组件 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 上更改了这个 line 以使其在尚未加载代码拆分组件时返回一个刹车标记
。然后我不需要实际的组件来呈现服务器端，我只是抛出另一个刹车标签，所以标记实际上是匹配的。

这远非理想

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>
    );
};