react-asyncmodule-chunk

react-asyncmodule-chunk

react-asyncmodule's Provider.

Installation

npm install react-asyncmodule-chunk

AsyncChunk

该组件获取到当前匹配到的组件的 chunkName(就是上面 chunk 方法的返回) 和 getInitialData 组件上的静态方法，通常用于 server render。

import AsyncChunk from 'react-asyncmodule-chunk';
import { StaticRouter } from 'react-router';
import { renderToStaticMarkup } from 'react-dom/server';

const context = {};
const modules = [];
const saveModule = (module) => {
    modules.push(module);
}
renderToStaticMarkup(
    <StaticRouter
        location={url}
        context={context}
    >
        <AsyncChunk report={saveModule}>
            <Approutes />
        </AsyncChunk>
    </StaticRouter>
);
// [{ chunkName: 'list', getInitialData: [Function] ]

如果你未使用任何第三方数据状态管理库(如redux)，获取到数据后可通过 AsyncChunk 组件的 receiveData props传递数据至组件上。

module[0].getInitialData({ ctx.req }).then((data) => {
    const html = renderToString(
        <StaticRouter
                location={url}
                context={context}
            >
            <AsyncChunk receiveData={data}>
                <Approutes />
            </AsyncChunk>
        </StaticRouter>
    );
});