Javascript 在React中表单验证后如何路由用户？

我是一个新的反应，并试图使注册登录项目

如果验证成功，我正在尝试将用户路由到登录/登录页面

这是我的注册码

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Axios from 'axios';

const initianValue = {
  username: '',
  password: '',
  nameError: '',
  passError: '',
  dataError: '',
};

class SignUp extends Component {
  constructor(props) {
    super(props);
    this.state = initianValue;
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  validForm() {
    let nameError = '';
    let passError = '';
    let dataError = '';

    const user = {
      username: this.state.username,
      password: this.state.password,
    };

    if (!this.state.username) {
      nameError = 'Enter Name';
    }

    if (user.username !== '' && user.password !== '') {
      Axios.post('http://localhost:9000/checkUser', user)
        .then((res) => this.setState({ dataError: res.data }))
        .catch((err) => console.log(err));
    }

    if (!this.state.password) {
      passError = 'Enter Password';
    }

    if (nameError || passError || dataError) {
      this.setState({
        nameError,
        passError,
        dataError,
      });
      return false;
    }

    return true;
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const isvalid = this.validForm();
    if (isvalid) {
      this.setState(initianValue, () => this.props.history.push('/Signin'));
    }
  };

  render() {
    return (
      <div className='Main'>
        <span className='create'>Create Account</span>
        <div className='SignUp'>
          <form onSubmit={this.handleSubmit}>
            <div className='form-group'>
              <label>Username</label>
              <input
                type='text'
                name='username'
                value={this.state.username}
                className='form-control'
                onChange={this.handleInputChange}
              />
              <div className='error'>
                {this.state.nameError}
                {this.state.dataError}
              </div>
              <br />
              <label>Password</label>
              <input
                type='password'
                name='password'
                value={this.state.password}
                className='form-control'
                onChange={this.handleInputChange}
              />
              <div className='error'>{this.state.passError}</div>
              <br />

              <button type='submit' className='btn btn-primary'>
                Sign Up
              </button>
            </div>
          </form>
        </div>
        <div className='signinForm'>
          <label>
            Already Have Account <Link to='/Signin'> Sign In </Link>
          </label>
        </div>
      </div>
    );
  }
}

export default SignUp;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“Axios”导入Axios；
常量初始值={
用户名：“”，
密码：“”，
名称错误：“”，
过路人：''，
数据错误：“”，
};
类注册扩展了组件{
建造师（道具）{
超级（道具）；
this.state=initianValue；
this.handleInputChange=this.handleInputChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleInputChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value，
});
};
有效形式（）{
让nameError=''；
让passeror=''；
让dataError=''；
常量用户={
用户名：this.state.username，
密码：this.state.password，
};
如果（！this.state.username）{
nameError='输入名称'；
}
如果（user.username！=''&&user.password！=''）{
轴心柱http://localhost:9000/checkUser，用户）
.then（（res）=>this.setState（{dataError:res.data}））
.catch（（err）=>console.log（err））；
}
如果（！this.state.password）{
passError='输入密码'；
}
if（名称错误| | | | | |数据错误）{
这是我的国家({
名称错误，
过路人，
数据错误，
});
返回false；
}
返回true；
}
handleSubmit=（e）=>{
e、 预防默认值（）；
const isvalid=this.validForm（）；
如果（有效）{
this.setState（initianValue，（）=>this.props.history.push（'/sign'）；
}
};
render（）{
返回(
创建帐户
用户名
{this.state.nameError}
{this.state.dataError}


密码
{this.state.passeror}


注册
已经有帐户登录
);
}
}
导出默认注册；

这是注册和完成后，如果没有错误，我想发送用户到登录页或下一页

我应该使用Redux吗

---

我该怎么做？

假设您的

注册

组件包装在

路由器中

您的组件应该已经可以使用“道具”访问

历史

因此，您只需执行

这个.props.history.push

。使用

setState

中的第二个参数，这是一个在设置状态后执行的有趣的参数（因为setState是异步的）

像这样

handleSubmit=（e）=>{
e、 预防默认值（）；
const isvalid=this.validForm（）；
如果（有效）{
this.setState（initianValue，（）=>this.props.history.push（“/dashboard”）；//首先我需要安装历史记录模块？在您的情况下不需要此模块…尝试一下，并告诉我是否有问题…还可以共享您的路由器配置代码（如果您面临问题）它可以在当前输入上工作，但当输入错误的用户名或密码时，它会在控制台上显示类似这样的警告？index.js:1警告：无法对已卸载的组件执行React状态更新。这是一个no op，但表示应用程序内存泄漏。若要修复此问题，请取消该组件中的所有订阅和异步任务。卸载方法d、 在注册（由Context.Consumer创建）中，我也安装了历史记录模块，但它的显示历史记录是定义的，但从未使用过