使用React Loadable进行代码拆分并使用容器进行路由

时间:2018-08-08 11:30:30

标签: reactjs react-router react-router-v4 react-router-dom react-loadable

我想实现每个主路径的代码拆分,以便每个页面都有其自己的文件(及其子组件),例如,我有一个带有Route组件的主渲染函数,该组件指向容器:

    <Route path={`path1`} component={foo.container} />
    <Route path={`path2`} component={bar.container} />

每个容器看起来像这样:

const mapDispatchToProps = {
... actions etc ...
}

const mapStateToProps = (state) => ({
... selectors etc ...
})

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withConnect)(MyComponent);

我试图包装一个容器并在路线中引用它,但是它没有用:

export default Loadable({
  loader: () => import('./MyContainer'),
  loading() {
    return (<div>Loading...</div>)
  },
});

那应该包装什么呢?

1 个答案:

答案 0 :(得分:1)

这是一个简化的示例,说明如何使用react-routerreact-loadable实现代码拆分:

MyPage.jsx -要在单独文件中生成的页面

import React from 'react';

const MyPage = () => (
    <div>My page</div>
);

export default MyPage;

LoadableMyPage.jsx -包装器,使您的页面可加载

import React from 'react';
import Loadable from 'react-loadable';

const LoadableMyPage = Loadable({
    loader: () => import('./MyPage'),
    loading: () => <div>Loading...</div>,
});

const LoadableMyPage = () => (
    <LoadableMyPage />
);

export default LoadableMyPage;

Router.jsx

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import LoadableMyPage from './LoadableMyPage';

const Router = () => (
    <Switch>
        <Route path="/" exact component={LoadableMyPage} />
        ...
    </Switch>
);

如@Mohit Tilwani所述,动态导入插件是必需的,因为它当前在stage-3中,并且还不是ECMAScript的一部分。

  

https://github.com/tc39/proposal-dynamic-import

我开始在自己的React样板中工作,在其中我实现了相同的代码拆分。如果您卡住了,请不要犹豫。

  

https://github.com/peetya/react-boilerplate