Async component not rendering on directly open page

[Slavenin]

Hi! I have components:

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

import ButtonAppBar from '../Containers/Menu'
import Context from '../Context'

import Login from './AsyncLogin';

const styles = theme => ({
    root: {
        flexGrow: 1,
        maxWidth: '90%',
        margin: 'auto',
        height: '100%'
    },
    paper: {
        padding: theme.spacing.unit * 2,
        textAlign: 'center',
        color: theme.palette.text.secondary,
    },
    form: {
        alignItems: 'center',
        justifyContent: 'center',
        display: 'flex'
    },
    loginBar: {
        height: '100%'
    },
    registerBar: {
        height: '100%'
    }
});

class OneAreaLayout extends React.Component {
    constructor(props) {
        super(props);
        const { classes } = props;

        this.login = this.getLogin(classes);
    }

    getLogin(classes) {
        return (
            <div className={classes.form}>
                <Context.Consumer>
                    {(context) =>
                        <Login
                            user={context.user}
                            setUser={context.setUser}
                            getUser={context.getUser}
                        />}
                </Context.Consumer>
            </div>
        );
    }

    render() {

        const { classes, variant } = this.props;
        const classBar = classes[`${variant}Bar`]
        return (
            <div className={classes.root}>
                <Grid container spacing={16} className={classBar}>
                    <Grid item xs={12}>
                        <ButtonAppBar className={classes.paper} />
                    </Grid>
                    <Grid item xs={12}>
                        {this[variant]}
                    </Grid>
                </Grid>
            </div>
        );
    }
}

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

export default withStyles(styles)(OneAreaLayout);

//AsyncLogin.js
import React from 'react';
import { asyncComponent } from 'react-async-component';

export default asyncComponent({
    resolve: () =>import('./Login'),
    LoadingComponent: () => <div>Loading...</div>,
    ErrorComponent: ({ error }) => <div>{error.message}</div>
});

//Login.js
import React from 'react';
import LoginForm from '../Components/LoginForm'
import axios from 'axios'
import { Redirect } from 'react-router'

class Login extends React.Component {
    constructor() {
        super();
        this.state = {
            error: null
        };
    }

    submit(values, pristineValues) {
       ...
    }

    render() {
        const {error} = this.state;
        const {user} = this.props
        
        if(user === null)
        {
            return <LoginForm error={error} onSubmit={::this.submit} />
        }

        return <Redirect to="/"/>;
    }
}

export default Login;

if i open login page from main page - async login form open successfully, but if i directly open the page in the browser - all scripts are loaded, but component not showing.