Conditional Redirect is not working in react-router-dom - reactjs

Question

I am using React as Front-End and Firebase for Backend and Database. I login.js component, when I signed in, I expect to redirect it to some formfield component. But, here when I try to Redirect the user after Success message from firebase, Redirection does not work conditionally. I used condition Operator for
redirection. Here's the core for Login.js
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { BrowserRouter as Router, Redirect} from 'react-router-dom';
import { Button, Card, CardContent, Paper, Typography, TextField, Tabs, Tab,FormControl } from '#material-ui/core';
import DateFnsUtils from '#date-io/date-fns';
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from '#material-ui/pickers';
import DataField from './DataField';
import * as firebase from 'firebase';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
margin: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
},
cards: {
maxWidth: 300,
margin: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
},
formControl: {
padding: theme.spacing(2),
margin: 'auto',
display: 'flex',
flexDirection: 'column',
justigyContent: 'space-around'
},
field: {
minWidth: 250
}
}));
function Login(){
const classes = useStyles();
const [email, setMail] = React.useState();
const [pass, setPass] = React.useState(new Date( '1995-08-18T21:11:54' ));
const auth = firebase.auth();
const handleDateChange = Date => {
const values = Date.toString();
setPass(values)
}
const handlerMail = e => {
setMail(e.target.value);
}
const verify = () => {
const promise = auth.signInWithEmailAndPassword(email, pass);
promise.catch(e => console.log(e.message));
firebase.auth().onAuthStateChanged((user) => {
return ( user ? <Redirect from='/' to='/datafield' /> : <Redirect from='/' to='/' /> )
})
}
return(
<React.Fragment className={classes.root}>
<Card className={classes.cards} elevation={0}>
<Typography variant='h5' color='primary'>Login</Typography>
<CardContent>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<FormControl className={classes.formControl}>
<TextField id="standard-basic" value={email} onChange={handlerMail} className={classes.field} label="Email" />
<KeyboardDatePicker
margin="normal"
id="date-picker-dialog"
label="Date of Birth"
format="MM/dd/yyyy"
value={pass}
onChange={handleDateChange}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</FormControl>
</MuiPickersUtilsProvider>
</CardContent>
<Button color='third' onClick={verify} variant='contained'>Login</Button>
</Card>
</React.Fragment>
)
};
export default Login;
I've been working for couples of days to solve it! Not yet found!!!
Can anybody help me to resolve this issue? Thank You!

Answer 1

Try histroy.replace, doc: https://reacttraining.com/react-router/web/api/history
Wrap Login component in withRouter HOC. export default withRouter(Login);
const verify = () => {
const { history } = props;
const promise = auth.signInWithEmailAndPassword(email, pass);
promise.catch(e => console.log(e.message));
firebase.auth().onAuthStateChanged(user => {
if (user) {
history.replace("/datafield");
}
});
};