React-Loadable пропускает рендеринг "Загрузка компонента"

Я пытаюсь сделать разделение кода в реакции маршрутизатора v4 с использованием реагирующей загрузки. Я намерен добиться того, чтобы не заменять текущий вид загружаемым компонентом, а сохранять то, что отображается в данный момент. и изменять состояние только загруженного в данный момент компонента. Есть ли способ добиться этого с помощью реагирующей нагрузки? Или может быть есть другая библиотека.

import Loadable from 'react-loadable';`
`import LoaderStripComponent from './LoaderStripComponent.jsx';`
`export default function Stage3Loadable(opts) {
    var loadable = Loadable(Object.assign({
        loading: LoaderStripComponent,
        timeout: 10
    }, opts));
    return loadable;
};`

`<Swtich>
 <Route exact path="/" component={Stage3Loadable({
      loader: () => import('../components/HomeCoverPage.jsx'),
      modules: ['.../components/HomeCoverPage.jsx'],
      webpack: () => [require.resolveWeak('../components/HomeCoverPage.jsx')],
    })} />
</Swtich>`

`class LoaderStripComponent extends React.Component {
    componentDidMount() {
        showLoader();
    }
    componentWillUnmount() {
        hideLoader();
    }
    componentWillReceiveProps(nextProps) {
        // console.log('>>>>>>>>>>>>', props.error);
    }
    render() {
        return null;
    }
}`
`function mapStateToProps(state) {
    return {
        device: state.device,
        geolocation: state.geoLocation,
        loader: state.routerLoading
    };
}`

`function mapDispatchToProps(dispatch) {`
    `return bindActionCreators({`

    }, dispatch);
`}`

export default connect(mapStateToProps, mapDispatchToProps)(LoaderStripComponent);

Я хочу, чтобы эта LoadableStrip отображала ранее загруженный компонент до тех пор, пока не будет решено время импорта.

0 ответов

Другие вопросы по тегам