Warm tip: This article is reproduced from serverfault.com, please click

javascript-如何在Reactjs的新的react-router-dom中使用重定向

(javascript - How to use Redirect in the new react-router-dom of Reactjs)

发布于 2017-04-05 11:42:11

我正在使用最新版本的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: {}
        });

        <Redirect to="/"/> // Here, nothings happens
      }).catch((error) => {
        const errors = error.response.data.errors ? error.response.data.errors : {};
        errors.summary = error.response.data.message;

        this.setState({
          errors
        });
      });
  }

  render() {
    return (
      <div className={styles.section}>
        <div className={styles.container}>
          <img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
          <SignUpForm 
            onSubmit={this.processForm}
            onChange={this.changeClient}
            errors={this.state.errors}
            client={this.state.client}
          />
          <Footer />
        </div>
      </div>
    );
  }
}

export default SignUpPage;
Questioner
maoooricio
Viewed
12
Sebastian Sebald 2019-01-14 15:19:40

你必须使用setState设置一个属性,该属性将呈现<Redirect>你的render()方法内部

例如

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  handleSubmit () {
    axios.post(/**/)
      .then(() => this.setState({ redirect: true }));
  }

  render () {
    const { redirect } = this.state;

     if (redirect) {
       return <Redirect to='/somewhere'/>;
     }

     return <RenderYourForm/>;
}

你还可以在官方文档中看到一个示例:https : //reacttraining.com/react-router/web/example/auth-workflow


就是说,我建议你将API调用放在服务之内。然后,你可以使用该history对象以编程方式进行路由。这就是与redux集成的工作方式。

但是我想你有这样做的理由。