如何在登录成功后使用ReactJS重定向到仪表板？

Question

我有一个仪表板，我想当我发布我的登录页面，它将被重定向在仪表板上。我的组件是：

import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
import fav from './favicon.ico';
import axios from 'axios';
import swal from 'sweetalert';
import { Redirect, Route, Switch,  Link  } from 'react-router-dom';
class Login extends Component {
   constructor (props) {
    super(props);
    this.state = {
      email :"",
      password:""
    }
   this.handleClick =this.handleClick.bind(this);
   // this.handleredirect =this.handleredirect.bind(this);
  }
     handleClick(event){

    var payload={
      "email":this.state.email,
        "password":this.state.password
    }
    axios({
          method: 'post',
          url: '/app/login/',
          data: payload,
          withCredentials: true,
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
            'Accept': 'application/json',
          }
        })
   // axios.post('/app/login/', payload)
   .then(function (response) {
     console.log(response);
     if(response.data.code == 200){
      <Link to="/dashboard"/>

     }
     else if(response.data.code == 204){
       swal("Erreur !", "Vérifiez vos champs SVP !", "error");
       //alert(response.data.success)
     }
     else{
       swal("Erreur !", "Username inexistant !", "error");
       //alert("Username does not exist");
     }
   })
  }
  handleredirect(){
    this.props.history.push("/register");
    }
  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>
                <Card className="p-4">
                  <CardBody>
                    <Form method="POST" >
                     <div style ={{textAlign:"center"}}> <img src={fav} /></div><br/>

                      <h2 style ={{textAlign:"center"}}>Se connecter</h2><br/>
                      <InputGroup className="mb-3">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="fa fa-user"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="email" placeholder="Email" autoComplete="username" value={this.state.email} onChange={e => this.setState({email: e.target.value })} required/>
                      </InputGroup>
                      <InputGroup className="mb-4">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="fa fa-lock"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="password" value={this.state.password} placeholder="Password" onChange={e => this.setState({password: e.target.value })} autoComplete="current-password"   required/>
                      </InputGroup>
                      <Row>
                        <Col xs="6">
                          <Button type="button" color="primary" className="px-4" onClick={(event) => this.handleClick(event)}>Login</Button>
                        </Col>
                        <Col xs="6" className="text-right">
                          <Button color="link" className="px-0">Forgot password?</Button>
                        </Col>
                      </Row>
                    </Form>
                  </CardBody>
                </Card>
                <Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: 44 + '%' }}>
                  <CardBody className="text-center">
                    <div><br/><br/><br/>
                      <h2 style ={{textAlign:"center"}}>S'inscrire</h2><br/>
                      <p>Vous n'avez pas de compte <strong>BRILLO</strong> ? <br/><br/>
                      Créez le !</p>
                      <Button color="primary" className="mt-3" active onClick={() => this.handleredirect()}>Créer compte</Button>
                    </div>
                  </CardBody>
                </Card>
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Login;

作为登录和注册的页面的我的路由：https://codeshare.io/GboVvO

我的仪表板路由：

https://codeshare.io/5oDeQZ

当我对登录页面求和时，我得到: CANNOT POST/

我该怎么运行它呢？

Answer 1

首先，我认为应该从表单元素中删除method=' POST‘，因为在这种情况下，按钮充当表单的提交按钮，而不是运行将实际请求发送到服务器的handleClick函数，表单尝试发布未定义的内容，因此会给出错误消息can not post。

然后，为了在登录成功后重定向到仪表板，而不是您，您应该编写: location.assign('/ dashboard ')；，这将在成功登录后将用户重定向到仪表板。