重定向不起作用，而 {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 link - https://codesandbox.io/s/winter-hooks-s9vgx

Answer 1

您必须使用斜杠：

to='/dashboard'

Answer 2

您正在从 onSubmit 方法调用 Redirect JSX 组件。但是你不能这样做，因为你需要 return 渲染方法中的 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 3

什么 said, but if you want to use <Redirect> you can create a state and detect if logged and then redirect it, like this。

正在添加更改

 this.state = {
      isLoggedIn: false
    };

并在渲染中

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

在提交中

this.setState({ isLoggedIn: true });

重定向不起作用，而 {this.props.history} 起作用

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

reactjs

react-router

react-router-v4