загружаемый компонент не ожидает триггера для загрузки

Question

Это базовый компонент заголовка, который включает кнопки для отображения форм входа / регистрации при нажатии.

Разумеется, предполагается, что компоненты входа и регистрации не должны загружаться до тех пор, пока не будет запрошено.

реагирующая загрузка создает дополнительный файл (0.js), который, кажется, включает компонент регистрации, но мой поиск не дал никаких ссылок на вход в систему.

В любом случае, припри начальной загрузке загружаются как логин, так и регистр, как показывает мой console.log.

Конечно, я ожидал, что они не будут загружены, пока не будет нажата кнопка запуска.

Обратите внимание, что я пытался использовать реагирующую загрузку на маршрутах, и, похоже, он работает правильно, т.е. я вижу файлы, загружаемые на вкладке сети инструментов dev.

Кроме того, у меня есть работник службы, который сейчас проповедует файлы сборки, но я не верю, что это должно повлиять на это.Или это должно?Это не относится к маршрутам.

Выдержки из компонента заголовка:

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';
import Loadable from 'react-loadable';

//import Register from '../register/'; ** PREVIOUS REGULAR IMPORT
//import Login from '../login/'; ** PREVIOUS REGULAR IMPORT
import { Loading } from '../../../tools/functions';


const Login = Loadable({
  loader: () => import('../login/'),
  loading: Loading,
  delay: 200,
  timeout: 5000
});

const Register = Loadable({
  loader: () => import('../register/'),
  loading: Loading,
  delay: 200,
  timeout: 10000
});

render () {
     return (
        <header>
            <div className="header_top flex">
                <div className="branding"></div>
                <div className="header_spacer"></div>
                <Status handleClick={this.handleLoginRegisterClick}/>
            </div>
            <Nav />
            <div className="auth">
                <Register 
                    active={this.state.activeRegister} 
                    handleClick={this.handleLoginRegisterClick}
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
                <Login 
                    active={this.state.activeLogin} 
                    handleClick={this.handleLoginRegisterClick} 
                    handleClickPasswordReset={this.togglePasswordResetRequest} 
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
                <PasswordResetRequest 
                    active={this.state.activePasswordResetRequest} 
                    hidePasswordResetRequest={this.togglePasswordResetRequest} 
                />
                <SessionHandler location={location}/>
            </div>
            {showAdForm()}
        </header>       
    );
}

Функция загрузки:

export const Loading = ({ error }) => {
if (error) {
  return 'error';
} else {
  return <h3>Loading...</h3>;
}

}

Answer 1

Моя ошибка состояла в том, что я изменил состояние дочернего компонента.Итак, я учел это, изменив метод рендеринга компонента заголовка следующим образом:

   const activeDialog = () => {
        if (this.state.activeLogin) {
            return (
                <Login 
                    active={this.state.activeLogin} 
                    handleClick={this.handleLoginRegisterClick} 
                    handleClickPasswordReset={this.togglePasswordResetRequest} 
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
            )
        } else if (this.state.activeRegister) {
            return (
                <Register 
                    active={this.state.activeRegister} 
                    handleClick={this.handleLoginRegisterClick}
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
            )
        } else if (this.state.activePasswordResetRequest) {
            return (
                <PasswordResetRequest 
                    active={this.state.activePasswordResetRequest} 
                    hidePasswordResetRequest={this.togglePasswordResetRequest} 
                />
            )
        }
    }

    return (
        <header>
            <div className="header_top flex">
                <div className="branding"></div>
                <div className="header_spacer"></div>
                <Status handleClick={this.handleLoginRegisterClick}/>
            </div>
            <Nav />
            <div className="auth">
                {activeDialog()}
                <SessionHandler location={location}/>
            </div>
            {showAdForm()}
        </header>       
    );