Question

需要有关action.js重定向的帮助

import axios from "axios";
import createHistory from 'history/createBrowserHistory';
import {Notification} from "modules/shared/components";
import * as types from "./actionTypes";
import {API_URL} from "utils/constants";

const history = createHistory();
export function signUp({name, email, password}) {
    return (dispatch) => {
        dispatch({type: types.AUTH_REQUEST});

        axios.post(`${API_URL}/auth/register`, {name, email, password})
            .then(response => {
                history.push('/');
            })
            .catch(error => {
                const {title, message} = error;
                dispatch(Notification('error', title, message));
                dispatch({type: types.AUTH_ERROR, payload: error});
            })
    }
}

过去我可以使用browserHistory.push('/')，它会将我重定向到/。使用React Router v4后，历史记录func消失了。我使用createHistory更改了它。是的它可以工作，但它只会改变我的网址，永远不会将我重定向到网址。

任何解决方案？

Answer 1

在反应路由器v3中，browserHistory是一个单身人士，您可以在任何地方使用它来导航到特定路线。但是在v4中，这将无效，因为<BrowserRouter>创建了自己的历史记录实例。因此，您应始终在可以访问路由器history实例的组件内更改路由。

这是我在这种场景中使用的方法。您可以在axios成功回调中调度AUTH_SUCCESS操作，而不是尝试在您的操作创建者中导航，并将响应作为您的操作负载。然后让你的reducer根据这个动作改变状态。举个例子，假设您的reducer更改了您所在州的user属性，如下所示。

case types.AUTH_SUCCESS:
      return Object.assign({}, state, {
        user: action.user,
      });

此外，您的SignUp组件（或您称之为signUp方法的任何组件）应该已作为道具连接到该州的user属性。如果您使用的是redux和react-redux，则可能会显示如下内容。

function mapStateToProps(state) {
  return {
    user: state.user
  };
}

export default connect(mapStateToProps)(SignUp);

现在，当user方法的signUp更改时，SignUp组件会收到user作为新道具。因此，如果定义了componentWillReceiveProps道具，您可以使用组件的user方法更改路线。

componentWillReceiveProps(newProps){
 if(newProps.user){
  this.props.history.push('/')
 }
}

要将路由器的history实例作为道具，要么SignUp组件应该使用Route呈现，要么使用withRouter

包装

或者作为替代方法，您可以在渲染方法中使用新的<Redirect/>组件，如下所示。

render(){
  return this.props.user ? (<Redirect to="/" />) : (...your current JSX code for SignUp component);
}

在动作反应时推送历史记录 - 路由器v4不会导航

1 个答案: