Javascript 反应路由器-在fom验证时重定向到另一页

当表单验证时，我试图重定向到另一个页面，但我所做的方式不起作用，我尝试了许多方法，但没有一种方法起作用，我的思想将爆炸

在这段代码中，我试图使用react router dom（router），我真的不知道为什么这不起作用

请遵循以下代码：

import React from 'react';
import { Redirect } from 'react-router-dom'
import './styles.css'

import Logo from '../../assets/FormRegister/logo.jpg'


class FormRegister extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fields: {},
      errors: {}
    }
  }

  handleValidation() {
    let fields = this.state.fields;
    let errors = {};
    let formIsValid = true;

    if (!fields["user"]) {
      formIsValid = false;
      errors["user"] = "Informe o usuário!";
    }

    if (!fields["password"]) {
      formIsValid = false;
      errors["password"] = "Informe a senha!";
    }
    let number = /\d+/g;
    let specialCharacter = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
    let alphanumeric = /[A-Za-z0-9]+$/;
    if (typeof fields["password"] !== "undefined") {
      if (fields["password"].length < 8) {
        formIsValid = false;
        errors["password"] = "Password deve possuir ao menos 8 caracteres!";
      }
      if (!specialCharacter.test(fields["password"])) {
        formIsValid = false;
        errors["password"] = "Password deve conter ao menos 1 caracter especial!";
      }

      if (!alphanumeric.test(fields["password"])) {
        formIsValid = false;
        errors["password"] = "Password deve conter ao menos 1 caracter alfanumérico!";
      }
    }
    if (typeof fields["password"] !== "undefined") {
      if (!number.test(fields["password"])) {
        formIsValid = false;
        errors["password"] = "Password deve conter ao menos 1 caracter numérico!";
      }
    }

    if (!fields["confirmPassword"]) {
      formIsValid = false;
      errors["confirmPassword"] = "Confirme a senha!"
    }

    if (typeof fields["confirmPassword"] !== "undefined") {
      if (fields["password"] !== fields["confirmPassword"]) {
        formIsValid = false;
        errors["confirmPassword"] = "As senhas não são iguais!";
      }
    }

    this.setState({ errors: errors });
    return formIsValid;
  }

  registerSubmit(e) {
    e.preventDefault();

    if (this.handleValidation()) {
      return <Redirect to="/leads" />
    }

  }

  handleChange(field, e) {
    let fields = this.state.fields;
    fields[field] = e.target.value;
    this.setState({ fields });
  }
  render() {
    
    return (
      <>
        <div className="container center-screen">
          <div className="main-form center-form">
            <div className="div-logo">
              <img src={Logo} alt="Logo" className="logo" />
            </div>
            <div className="div-form">
              <form id="form1" onSubmit={this.registerSubmit.bind(this)}>
                <label htmlFor="user">Usuário *</label>
                <div className="div-form-error">
                  <span className="form-error">{this.state.errors["user"]}</span>
                </div>
                <input type="text" name="user" onChange={this.handleChange.bind(this, "user")} value={this.state.fields["user"]} />

                <label htmlFor="password">Password *</label>
                <div className="div-form-error">
                  <span className="form-error">{this.state.errors["password"]}</span>
                </div>
                <input type="password" name="password" placeholder="*******" onChange={this.handleChange.bind(this, "password")} value={this.state.fields["password"]} />

                <label htmlFor="confirmPassword" >Confirmação Password *</label>
                <div className="div-form-error">
                  <span className="form-error">{this.state.errors["confirmPassword"]}</span>
                </div>
                <input type="password" name="confirmPassword" placeholder="*******" onChange={this.handleChange.bind(this, "confirmPassword")} value={this.state.fields["confirmPassword"]} />

                <button type="submit" form="form1" value="Submit" className="register">
                  Registrar
              </button>

              </form>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default FormRegister;

从“React”导入React；
从“react router dom”导入{Redirect}
导入“./styles.css”
从“../../assets/FormRegister/Logo.jpg”导入徽标
类FormRegister扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
字段：{}，
错误：{}
}
}
手推车（）{
让fields=this.state.fields；
让错误={}；
让formIsValid=true；
如果（！字段[“用户”]）{
formIsValid=false；
错误[“user”]=“Informe o usuário！”；
}
如果（！字段[“密码”]）{
formIsValid=false；
错误[“password”]=“informeasenha！”；
}
设number=/\d+/g；
让specialCharacter=/[！@\\$%^&*（）\+\-=\[\]{}；'：“\\\\\，.\/？]”；
设字母数字=/[A-Za-z0-9]+$/；
如果（字段类型[“密码”！=“未定义”）{
如果（字段[“密码”]。长度<8）{
formIsValid=false；
错误[“password”]=“password deve possuir ao menos 8个字符！”；
}
如果（！specialCharacter.test（字段[“密码]））{
formIsValid=false；
错误[“password”]=“password deve conter ao menos 1字符专用！”；
}
如果（！字母数字.test（字段[“密码”]））{
formIsValid=false；
错误[“password”]=“password deve conter ao menos 1 caracter alfanumérico！”；
}
}
如果（字段类型[“密码”！=“未定义”）{
如果（！number.test（字段[“密码]））{
formIsValid=false；
错误[“password”]=“password deve conter ao menos 1 caracter numérico！”；
}
}
如果（！字段[“confirmPassword”]）{
formIsValid=false；
错误[“确认密码”]=“确认密码！”
}
如果（字段类型[“确认密码”！=“未定义”）{
如果（字段[“密码”]！==字段[“确认密码”]）{
formIsValid=false；
错误[“confirmPassword”]=“如senhas não são iguais！”；
}
}
this.setState（{errors:errors}）；
返回formIsValid；
}
注册提交（e）{
e、 预防默认值（）；
if（this.handleValidation（））{
返回
}
}
手柄更换（现场，e）{
让fields=this.state.fields；
字段[字段]=e.target.value；
this.setState（{fields}）；
}
render（）{
返回(
乌苏瓦里奥*
{this.state.errors[“user”]}
密码*
{this.state.errors[“password”]}
确认密码*
{this.state.errors[“confirmPassword”]}
登记员
);
}
}
导出默认表单注册表；

---

你能帮我解决这个问题吗？我会很感激的！

重定向只在渲染功能中起作用。如果你想将用户重定向到另一个URL，那么你可以使用history.push（URL）

您的注册表submit功能可以

 registerSubmit(e) {
    const { history } = this.props;
    e.preventDefault();

    if (this.handleValidation()) {
      history.push("/leads")
    }
  }

并使用路由器将FormRegister包装为

export default withRouter(FormRegister);

---

您可以通过几种方式来实现这一点

在响应路由器dom中使用使用历史记录

import { useHistory } from 'react-router-dom';

const history = useHistory();

if (this.handleValidation()) {
  history.push("/path/to/push");
}

在react router dom中对路由器使用

import { withRouter } from 'react-router-dom';

if (this.handleValidation()) {
  history.push("/path/to/push");
}

使用重定向方式

import { Route, Redirect } from 'react-router'


<Route exact path="/" render={() => (
    this.handleValidation && (
        <Redirect to="/path/to/push"/>
    ) 
)}/>

从'react router'导入{Route，Redirect}
(
这是我的手推车(
) 
)}/>

请参考此url，IMHO，

字段[“密码”]！=null

比

字段类型[“密码”]！=“未定义”

要好多兄弟，你是最好的！

import { Route, Redirect } from 'react-router'


<Route exact path="/" render={() => (
    this.handleValidation && (
        <Redirect to="/path/to/push"/>
    ) 
)}/>