Redirect не работает, а {this.props.history} работает

Question

Пока действие успешно, перенаправление не работает, но history.replace работает. Почему ??

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);

Пожалуйста, перейдите на страницу входа и проверьте это. Ссылка Codesandbox - https://codesandbox.io/s/winter-hooks-s9vgx

Answer 1

Вы вызываете свой компонент Redirect JSX из метода onSubmit. Однако вы не можете этого сделать, поскольку вам нужно возвращать элементы JSX из метода рендеринга, поэтому вам нужно использовать 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

Как и то, что @ Шубхам Кхатри сказал, но если вы хотите использовать <Redirect>, вы можете создать состояние и определить, вошел ли в систему, а затем перенаправить его, например this .

Изменения добавляются

 this.state = {
      isLoggedIn: false
    };

А в рендере

if (this.state.isLoggedIn) return <Redirect to="/dashboard" />;

в onSubmit

this.setState({ isLoggedIn: true });

Answer 3

Вы должны использовать косую черту:

to='/dashboard'