react

Решить данную задачу можно с помощью кода вроде:

React.lazy динамический импорт

Об импорте: https://ru.reactjs.org/docs/code-splitti...

Проблема возникает в обработчике:

const handleSubmit = React.useCallback((event) => {
        event.preventDefault();

        setState({ ...state, lockSubmit: true });
        console.log('csubmit state', formState);
        props.dispatch(createUser(formState, handleSuccessCreation, handleFail));

    }, [formState, setFormState]);

Если форма отправляется программно через ссылку:

Полезные пакеты:

• react-form-validator-core -- ядро описывающее правила валидации: https://www.npmjs.com/package/react-form...
• react-material-ui-form-validator - удобная обертка для набора компонентов material-ui: https://www.npmjs.com/package/react-mate... использует предыдущий пакет.

В связи с оптимизациями производительности вызовы "поряд" могут затирать один другой, в таком случае для setState рекомендуется (см. подробности) передавать функцию вместо значения, т.е. например, идущие подряд вызовы типа (внутри хука):

Выбор между локальным стэйтом и глобальным пропсом:

type={jswl.isDefined(state.type) ?
       state.type : props.defaultCampaignTypeId} 

--если значение в локальном стейте определено, то используем его, а не глобальное значение по умолчанию получаемое извне.

Selector creators expect all input-selectors to be functions, instead received the following types: [undefined]

Проблема возникает судя по всему из-за циклических зависимостей:
https://decembersoft.com/posts/error-sel...

Используйте компонент FormHelperText.

• API:https://material-ui.com/api/form-helper-...
• Примеры: https://material-ui.com/components/text-...

Сработает решение вроде:

import {
   BrowserRouter as Router,
   Route,
   Switch, 
   Redirect,
} from "react-router-dom";

<Router>             
   <Switch>
      <Redirect exact from="/" to='/index'} />
      <Route path='login' component={Login2} />
   </Switch>
</Router>

-- для того чтобы работал from нужно:

Например (в стиле хуков):

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';


const styles = theme => ({
    formSection: {
        'margin-top': '20px',
    }
});

function FormSection(props) {
    const { classes } = props;

    return (
        <div className={classes.formSection}>
            {props.children} 
        </div>
    );
}

FormSection.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(FormSection);