Usar webpack2.2.0-rc1 y reaccionar routerv4, y usar esta esencia para hacer que funcione la división de código, que establece lo siguiente
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) ) En realidad funciona, pero estoy usando la representación del lado del servidor. Entonces, en el servidor, necesito el componente A, luego, en el cliente, System.import el componente A. Finalmente, cuando accedo a la ruta de carga diferida, recibo esta advertencia de marcado de reutilización de reacción porque el cliente se cargó inicialmente como nulo desde https://gist.github .com/acdlite/a68433004f9d6b4cbc83b5cc3990c194#file-app-js-L21 al cargar el Componente 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
¿Cómo puedo hacer que esto funcione sin errores?
Acabo de cambiar esta línea en AsyncComponent para que devuelva una etiqueta de freno
mientras que el componente de código dividido aún no está cargado. Luego, en lugar de requerir que el componente real se renderice en el lado del servidor, simplemente lanzo otra etiqueta de freno, por lo que el marcado realmente coincide.
Esto está lejos de ser ideal
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> ); };