React JS中的Formik表单重定向问题

问题描述

我是React和学习React Form的新手，在登录表单上成功验证到其他位置后，我面临重定向问题。但是无法做到，最近几天我抓挠了头，我需要帮助解决此问题。我还应用了useHistory，但它给了我错误 {TypeError：无法读取未定义的属性'push'}

• AdminLoginForm.js

import React from "react";
import { Formik } from "formik";
import * as EmailValidator from "email-validator";
import * as Yup from "yup";
import data from './data'

const admindata = data.admindata;
const AdminLoginForm = () => (
  <Formik
    initialValues={
      { 
        email: "",password: "" 
      }
  }
    
    onSubmit = { (values,{ setSubmitting }) => {      
      if(values.email == admindata.email && values.password == admindata.password){
      //  Routing sould be here
      setSubmitting(true)
      this.context.router.history.push('/AdminAccess');      
      }
      
      setTimeout(() => {        
        console.log("Logging in",values);
        console.log("data",admindata.email);              
        setSubmitting(true);
      },500);      
    }}
    
    validationSchema={ Yup.object().shape({
      email: Yup.string()
      .email()
      .required("required"),password: Yup.string()
      .required("No password provided.")
      .min(8,"Password is too short - should be 8 chars minimum.")
      .matches(/(?=.*[0-9])/,"Password must contain a number.")
    })}
  >
    {props => {
      const {
        values,touched,errors,isSubmitting,handleChange,handleBlur,handleSubmit
      } = props;      

      return (
        <form onSubmit={handleSubmit}>
          <label htmlFor="email">Email</label>
          <input
            name="email"
            type="text"
            placeholder="Enter your email"
            value={values.email}
            onChange={handleChange}
            onBlur={handleBlur}
            className={errors.email && touched.email && "error"}
          />
          {errors.email && touched.email && (
            <div className="input-Feedback">{errors.email}</div>
          )}
          <label htmlFor="email">Password</label>
          <input
            name="password"
            type="password"
            placeholder="Enter your password"
            value={values.password}
            onChange={handleChange}
            onBlur={handleBlur}
            className={errors.password && touched.password && "error"}
          />
          {errors.password && touched.password && (
            <div className="input-Feedback">{errors.password}</div>
          )}
          <button type="submit" disabled={isSubmitting}>
            Login
          </button>
        </form>        

      );
    }}
  </Formik>  
);

export default AdminLoginForm;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）