1
votes

La redirection ne fonctionne pas, alors que {this.props.history} le fait

Lorsqu'une action réussit, la redirection ne fonctionne pas mais history.replace fonctionne. Pourquoi ??

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

Veuillez aller sur la page de connexion et vérifier ceci. Lien Codesandbox - https://codesandbox.io/s/winter-hooks-s9vgx

reactjs react-router react-router-v4

0 commentaires

3 Réponses :

1
votes

Vous devez utiliser la barre oblique:

to='/dashboard'

0 commentaires

2
votes

Vous appelez votre composant Redirect JSX à partir de la méthode onSubmit. Cependant, vous ne pouvez pas le faire car vous devez renvoyer les éléments JSX à partir de la méthode de rendu, c'est pourquoi vous devez utiliser historique pour mettre à jour la route

     onSubmit={(values, { resetForm, setErrors, setSubmitting }) => {
        setTimeout(() => {
          console.log("Logging in", values);
          setSubmitting(false);
          this.props.history.replace("/dashboard");
        }, 500);

2 commentaires

Merci @ shubham-khatri Pouvez-vous s'il vous plaît examiner ce bogue -> stackoverflow.com/questions/58502707/...

Bonjour @ Shubham-Khatri, pouvez-vous s'il vous plaît m'aider dans ce titre - stackoverflow.com/questions/58809648/… Je suis bloqué depuis 3 jours

1
votes

Comme l'a dit @Shubham Khatri , mais si vous souhaitez utiliser vous pouvez créer un état et détecter s'il est connecté, puis le rediriger, comme ceci .

Les changements s'ajoutent

this.setState({ isLoggedIn: true });

Et dans le rendu

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

dans onSubmit

 this.state = {
      isLoggedIn: false
    };

2 commentaires

Salut @Michael Pouvez-vous s'il vous plaît examiner ceci - stackoverflow.com/questions/58809648/...

Bonjour Michael, aidez-moi s'il vous plaît dans ce problème - stackoverflow.com/q/59408716/7682925