我正在使用最新版本的 react-router 模块,名为 react-router-dom,它已成为使用 React 开发 Web 应用程序时的默认设置。我想知道如何在 POST 请求后进行重定向。我一直在制作这段代码,但是在请求之后,什么也没有发生。我在网上查看,但所有数据都是关于 react 路由器的早期版本,而上次更新则没有。
代码:
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;
您必须使用setState来设置将呈现方法<Redirect>内部的属性render()。
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 集成的方式。
history
但我想你有理由这样做。