Redirect doesn;t work, while {this.props.history} does - reactjs

Question

While an action is successful, redirect is not working but history.replace is working.
Why??
import React, { Component } from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { withRouter } from "react-router-dom";
class Login extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div id="loginContainer" className="signinup-container">
<h3 className="mb-4"> Log In </h3>
<Formik
initialValues={{
email: "",
password: "",
rememberMe: false,
error: ""
}}
validationSchema={Yup.object().shape({
email: Yup.string()
.required("Please enter email to login.")
.email("Please enter a valid email."),
password: Yup.string().required("Please enter your password.")
})}
onSubmit={(values, { resetForm, setErrors, setSubmitting }) => {
setTimeout(() => {
console.log("Logging in", values);
setSubmitting(false);
return <Redirect to="/dashboard" />;
//this.props.history.replace("/dashboard");
//this.props.history.push('/dashboard');
}, 500);
}}
>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange
} = props;
return (
<Form id="loginForm" className="signinupForm" noValidate>
<ErrorMessage
name="error"
component="span"
className="login-error"
/>
<div className="form-group ">
<label className="form-label" htmlFor="email">
Email
</label>
<Field
type={"email"}
name="email"
placeholder="Enter your email"
className={
"form-control" +
(errors.email && touched.email ? " is-invalid" : "")
}
/>
<ErrorMessage
name="email"
component="span"
className="invalid-input"
/>
</div>
{/* Email */}
<div className="form-group position-relative">
<label className="form-label" htmlFor="password">
Password
</label>
<Field
type={"password"}
name="password"
placeholder="Enter your password"
className={
"form-control" +
(errors.password && touched.password ? " is-invalid" : "")
}
/>
<ErrorMessage
name="password"
component="span"
className="invalid-input"
/>
</div>
{/* Password */}
<div className="form-group">
<label className="form-label" htmlFor="rememberMe">
<input
type="checkbox"
id="rememberMe"
name="rememberMe"
onChange={handleChange}
defaultChecked={values.rememberMe}
value={values.rememberMe}
/>
Remember me
</label>
</div>
{/* Rememeber Me */}
{isSubmitting ? (
<span className="loader-gif">loading</span>
) : null}
<button
type="submit"
className="btn btn-filled"
disabled={isSubmitting}
>
Login
</button>
{/*Submit */}
</Form>
);
}}
</Formik>
</div>
);
}
}
export default withRouter(Login);
Please go to login page and check this.
Codesandbox link - https://codesandbox.io/s/winter-hooks-s9vgx

Answer 1

You are calling your Redirect JSX component from onSubmit method. However you cannot do that since you need to return the JSX elements from within the render method which is why you need to use history to update route
onSubmit={(values, { resetForm, setErrors, setSubmitting }) => {
setTimeout(() => {
console.log("Logging in", values);
setSubmitting(false);
this.props.history.replace("/dashboard");
}, 500);

Answer 2

You must be using slash:
to='/dashboard'

Answer 3

As what #Shubham Khatri said, but if you want to use <Redirect> you can create a state and detect if logged and then redirect it, like this.
Changes are adding
this.state = {
isLoggedIn: false
};
And in render
if (this.state.isLoggedIn) return <Redirect to="/dashboard" />;
in onSubmit
this.setState({ isLoggedIn: true });