如何在Reactjs的react-router-dom版本5中使用Redirect。

9 浏览
0 Comments

如何在Reactjs的react-router-dom版本5中使用Redirect。

我正在使用最新版本的react-router模块,名为react-router-dom,在使用React开发Web应用程序时已成为默认选择。我想知道如何在POST请求后进行重定向。我已经编写了以下代码,但是在请求后没有任何反应。我在网络上查看了一些资料,但是所有的数据都是关于之前版本的react router,而不是最新的更新版本。

代码:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'
import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';
class SignUpPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      errors: {},
      client: {
        userclient: '',
        clientname: '',
        clientbusinessname: '',
        password: '',
        confirmPassword: ''
      }
    };
    this.processForm = this.processForm.bind(this);
    this.changeClient = this.changeClient.bind(this);
  }
  changeClient(event) {
    const field = event.target.name;
    const client = this.state.client;
    client[field] = event.target.value;
    this.setState({
      client
    });
  }
  async processForm(event) {
    event.preventDefault();
    const userclient = this.state.client.userclient;
    const clientname = this.state.client.clientname;
    const clientbusinessname = this.state.client.clientbusinessname;
    const password = this.state.client.password;
    const confirmPassword = this.state.client.confirmPassword;
    const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };
    axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
      .then((response) => {
        this.setState({
          errors: {}
        });
         // 这里,没有任何反应
      }).catch((error) => {
        const errors = error.response.data.errors ? error.response.data.errors : {};
        errors.summary = error.response.data.message;
        this.setState({
          errors
        });
      });
  }
  render() {
    return (
          
          
          
); } } export default SignUpPage;

0