-
-
Save eduard-tkv/94592d77a047c1242c7be9a9fd39e439 to your computer and use it in GitHub Desktop.
//using ES6 | |
import React from 'react'; | |
class App extends React.Component { | |
constructor(props) { | |
super(props) | |
this.handleClick = this.handleClick.bind(this) | |
} | |
handleClick(e) { | |
e.preventDefault() | |
this.props.history.push('/redirected'); | |
} | |
render() { | |
return ( | |
<div> | |
<button onClick={this.handleClick}> | |
Redirect!!! | |
</button> | |
</div> | |
) | |
} | |
} | |
export default App; |
i am not using a class i am using function how can i use history.push this is my code :
import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import axios from 'axios';
import { Redirect } from 'react-router'
/*
import {PostData} from '../../node_modules/'; */
const useStyles = makeStyles(theme => ({
'@global': {
body: {
backgroundColor: theme.palette.common.white,
},
},
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%',
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function SignUp() {
const classes = useStyles();
const [values, setValues] = React.useState({
realm: '',
username: '',
email: '',
address: '',
password: '',
});
const handleChange = name => event => {
setValues({ ...values, [name]: event.target.value });
};
const newUser = {
realm: values.realm,
username: values.username,
address: values.address,
email: values.email,
password: values.password
}
const handleSubmit = e => {
console.log('Your input value is: ' + values.realm + " "+ values.username +" "+ values.email + " "+ values.address+ " "+ values.password);
addUser(newUser);
e.preventDefault();
console.log('user saved ====')
action
};
function addUser(newUser){
axios.post('http://localhost:3000/api/Users', newUser).then(res => ).catch(err => console.log(err));
}
return (
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<form className={classes.form} noValidate>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
autoComplete="fname"
name="realm"
variant="outlined"
required
fullWidth
id="realm"
label="First Name"
autoFocus
value={values.realm}
onChange={handleChange('realm')}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
required
fullWidth
id="username"
label="Last Name"
name="username"
autoComplete="lname"
value={values.username}
onChange={handleChange('username')}
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
value={values.email}
onChange={handleChange('email')}
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="address"
label="Address"
name="address"
autoComplete="address"
value={values.address}
onChange={handleChange('address')}
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
value={values.password}
onChange={handleChange('password')}
/>
</Grid>
</Grid>
<Button as="input" type="submit" fullWidth variant="contained" color="primary" className={classes.submit}
href ='/dash' onSubmit={handleSubmit}> Sign Up </Button>
<Grid container justify="flex-end">
<Grid item>
<Link href="/" variant="body2">
Already have an account? Sign in
</Link>
</Grid>
</Grid>
</form>
</div>
</Container>
);
}
This is not working.. :(
I tried this code,but I got errors in router.
In some case it doesn't work well.
Anyone help me?