真的，过去几天都在苦苦挣扎。将react-router v2项目转换为react-router-dom v4。
最初的重定向是在./actions/index.js browserHistory.push('/home');进行的，react-router-dom v4不再适用于withRoute，除非您创建了一个“实验性”且不受支持的上下文，所以你应该这样做使用PUT在您的组件/容器中执行此操作。至少，如果你想在动作文件而不是组件/容器中重定向，那就是我的理解。
无论如何，作为一个新手，它需要我一段时间。我发现的大多数教程都没有用，因为他们没有真正考虑等待服务器响应，我只是不确定重定向应该放在我的组件中。
我目前需要提交两次才能重定向：1）以// ./containers/authentication/signin.js
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { signinUser, authError } from '../../actions/authentication';
const renderInput = field => {
const { input, type } = field;
return (
<div>
<input {...input} type={type} className='form-control' />
</div>
);
}
class Signin extends Component {
handleFormSubmit({ username, password }) {
this.props.signinUser({ username, password });
if (localStorage.getItem('status') === '200') {
this.props.history.push('/home');
}
}
renderAlert() {
if (this.props.errorMessage) {
return (
<div className="alert alert-danger">
<strong>Oops!</strong> {this.props.errorMessage}
</div>
);
}
}
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<div className="form-group">
<label>Username:</label>
<Field name='username' type='username' component={renderInput} />
</div>
<div className="form-group">
<label>Password:</label>
<Field name='password' type='password' component={renderInput} />
</div>
{this.renderAlert()}
<button action="submit" className="btn btn-primary">Sign in</button>
</form>
);
}
}
function mapStateToProps(state) {
return { errorMessage: state.auth.error };
}
Signin = connect(mapStateToProps, { signinUser, authError })(Signin);
Signin = reduxForm({
form: 'signin'
})(Signin);
export default withRouter(Signin);
凭据进行身份验证API; 2）获取localStorage中保存的响应并使用它来验证重定向。
这样做的正确方法是什么？
谢谢！
以下是代码：
// ./actions/authentication/index.js
import axios from 'axios';
import { ROOT_URL } from '../../../config/settings/secrets.json';
export const AUTH_USER = 'auth_user';
export const UNAUTH_USER = 'unauth_user';
export const AUTH_ERROR = 'auth_error';
export function signinUser({ username, password }) {
return function(dispatch) {
axios.post(`${ROOT_URL}/api/auth/token/`, { username, password })
.then(response => {
dispatch({ type: AUTH_USER });
localStorage.setItem('token', response.data.token);
localStorage.setItem('status', response.status);
})
.catch(error => {
console.log(error);
dispatch(authError('Bad Login Info'));
});
}
}
export function authError(error) {
return {
type: AUTH_ERROR,
payload: error
};
}
export function signoutUser() {
localStorage.removeItem('token');
return { type: UNAUTH_USER };
}
{{1}}