React Router - Redirect to another page when fom validate

Question

I'm trying to redirect to another page when the form validates, but the way that I'm doing is not working, I tried many ways, but no one of them is working, my mind is going to explode.

On that code, I'm trying to use the react-router-dom (Router), I really not know why this is not working!

follow the code below:

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;

Can you help me to solve this problem? I'll be grateful!

refer to this url https://stackoverflow.com/questions/50793148/how-to-redirect-to-a-new-page-from-a-function-in-react — Eric, Oct 09 '20 at 00:59
IMHO, `fields["password"] != null` is better than `typeof fields["password"] !== "undefined"` — ezio4df, Oct 10 '20 at 00:10

score 1 · Accepted Answer · edited Oct 09 '20 at 04:29

1

Redirect works only within the render function. If you want to redirect the user to another URL then you can use history.push(url).

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

Your registerSubmit function can be

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

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

And wrap the FormRegister with withRouter

export default withRouter(FormRegister);

edited Oct 09 '20 at 04:29

Sarun UK

6,210
7
23
48

answered Oct 09 '20 at 01:01

Yadab

1,767
1
10
16

Tks a lot bro, you are the best! – Gabriel Andrade Oct 09 '20 at 01:09

score 1 · Answer 2 · answered Oct 09 '20 at 04:24

You can do this through several ways.

Using useHistory in react-router-dom

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

const history = useHistory();

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

Using withRouter in react-router-dom.

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

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

Using Redirect way.

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


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

React Router - Redirect to another page when fom validate

2 Answers2