rrv4-push.js

//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.. :(