javascript - 在 React 中成功发布请求后重定向的正确方法是什么?
问题描述
我是 React 新手,我正在建立一个小项目。我正在使用响应我的请求的 NodeJS 服务器,并且我正在尝试在成功登录后重定向用户。我调度了一个动作并使用用户信息更新了我的 redux 存储,它工作正常。但是当我尝试重定向他时,我要么没有收到任何错误,也没有任何反应,要么 URL 发生了变化,但没有组件呈现。顺便说一句,在 LoginForm.js 中,我试图通过尝试向我的操作添加带有历史对象的回调来在多次失败后返回重定向。所以这是我的代码
应用程序.js
import React, { Component } from 'react';
import LoginPage from './login/LoginPage';
import LandingPage from './landingpage/landing.page';
import ProtectedRoute from './protected/ProtectedRoute';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import PageNotFound from './common/pageNotFound';
class App extends Component {
render() {
return (
<Router >
<Switch>
<Route path="/login" component={() => <LoginPage />} />
<ProtectedRoute path="/" component={LandingPage} />
<Route component={() => <PageNotFound />} />
</Switch>
</Router>
)
}
}
export default App;
登录页面.js
import React, { Component } from 'react'
import LoginForm from './LoginForm';
import PropTypes from 'prop-types'
import { connect } from 'react-redux';
import { login } from '../../actions/authActions';
import { withRouter } from "react-router";
class LoginPage extends Component {
render() {
const { login, userLoading, history } = this.props;
return (
<div>
<h1>Login in here</h1>
<LoginForm login={login} isLoading={userLoading} history={history} />
</div>
)
}
}
LoginPage.propTypes = {
login: PropTypes.func.isRequired
}
function mapStateToProps(state) {
return {
userLoading: state.auth.isLoading
}
}
export default connect(mapStateToProps, { login })(withRouter(LoginPage));
登录表单.js
import React, { Component } from 'react'
import TextInput from '../common/TextInput';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
redirect: false,
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
})
}
handleSubmit(event) {
event.preventDefault();
this.setState({ error: null });
this.props.login(this.state);
this.setState({
redirect: true
})
}
render() {
const { isLoading, isAuth } = this.props;
const { redirect } = this.state;
console.log(redirect, isAuth)
if (redirect && isAuth) {
return <Redirect to="/" />
}
else {
return (
<form onSubmit={this.handleSubmit}>
<TextInput type="email" name="email" label="Email" onchange={this.handleChange} />
<TextInput type="password" name="password" label="Password" onchange={this.handleChange} />
{isLoading && <p>We are loggin you in</p>}
<button disabled={isLoading} type="submit">Log in</button>
</form>
)
}
}
}
const mapStateToProps = (state) => {
return {
isAuth: state.auth.isAuthenticated
}
}
LoginForm.propTypes = {
login: PropTypes.func.isRequired
}
export default connect(mapStateToProps)(LoginForm);
authActions.js
import {
LOGIN,
LOGIN_SUCCESS,
LOGIN_FAILED,
USER_LOADING,
USER_LOADED,
AUTH_ERROR,
REGISTER_SUCCESS,
REGISTER_FAIL,
} from '../constants';
export function login(payload) {
return dispatch => {
dispatch({ type: USER_LOADING })
setTimeout(function () {
return fetch('http://localhost:3000/user/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
}).then(
(res) => {
dispatch({ type: LOGIN_SUCCESS })
return res.json();
},
(err) => dispatch({ type: LOGIN_FAILED })
).then((data) => {
dispatch({
type: USER_LOADED,
payload: {
token: data.token,
userid: data.userID
}
})
});
}, 1000);
}
}
解决方案
由于您的 LoginForm 与withRouter
您可以使用this.props.history.pushState('/next-route')
推荐阅读
- python - 在 Python 中创建类对象属性后如何更改它们?
- apollo-server - Apollo 服务器:获取将在 reuqestContext 中解析查询/突变的函数?
- angular - Kendo Dialog 的 Angular 服务引发错误
- python - 在pygame中添加对象碰撞
- mysql - 在 django 查询集中的表字段中返回拆分的长字符串
- sql - 数组中的 PostgreSQL 整数不可合并连接
- python - 如何解释特定于我的代码的索引错误
- java - java.lang.IllegalArgumentException:未找到 ArquillianServletRunner。无法从 ProtocolMetadata 确定 ContextRoot
- python - 在 tensorflow.js 中使用参差不齐的张量进行索引
- c++ - GetFileAttributesW 可以处理文件路径中的 url 编码空格 (%20) 吗?