Open Slavenin opened 6 years ago
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.
Hi! I have components:
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.