我正在使用最新版本的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;
你必须使用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集成的工作方式。
但是我想你有这样做的理由。
@sebastian sebald您的意思是
put the API call inside a service or something
什么?在组件内部具有这样的(异步)API调用将使测试和重用变得更加困难。通常最好创建一个服务,然后在中使用它(例如)
componentDidMount
。甚至更好的是,创建一个“包装”您的API的HOC。请注意,您必须在文件开头包含“重定向”才能使用它:从“ react-router-dom”导入{Redirect}
是的,在幕后
Redirect
打电话history.replace
。如果要访问history
对象,请使用withRoutet
/Route
。react-router
> = 5.1现在包含钩子,因此您可以const history = useHistory(); history.push("/myRoute")