在React中提交表单时使用重定向

Question

我一直在尝试在用户登录时重定向。登录可以正确使用我的数据库，并将有条件地为我的管理门户提供我的新链接。我试图在获得状态代码200时使用重定向，但我不确定这是否是正确的方式。

登录组件的axios帖子：

const handleSubmit = e => {
e.preventDefault();
console.log(adminLogin)
axios
.post("/api/Authentication", adminLogin)
.then(function(response) {
if (response.status === 200) {
setIsLoggedIn(true);
<Redirect to="/inventory" />
}
setAdminLogin(response.data);
console.log(response);
})
.catch(function(error) {
console.log(error);
});

Answer 1

您不能直接从函数重定向。如果你想从函数重定向，那么你可以使用this.props.history.push('/inventory');

还有另一种使用状态重定向的方法。

const[login,setIsLoggedIn]=useState(false)
if (response.status === 200) {
setIsLoggedIn(true);
}
if(login){
return <Redirect to='/inventory'/>
}
return(
//Main function return
);

Answer 2

如果你使用react router dom，你可以从文档中看到这个例子，你可以在这里看到类似的问题

Answer 3

由于这是一个axios调用，因此始终建议使用this.props.history.push((.

确保在使用此功能时，您已经使用withRouter来路由您的组件。

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import axios from 'axios';
class App extends Component {
...
const handleSubmit = e => {
e.preventDefault();
console.log(adminLogin)
axios
.post("/api/Authentication", adminLogin)
.then(function(response) {
if (response.status === 200) {
setIsLoggedIn(true);
this.props.history.push('/inventory');
}
setAdminLogin(response.data);
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
...
}
export default withRouter(App);

如果您不使用withRouter包装您的组件，那么history对象将不会出现在this.ops中，因此将抛出一个错误。