推历史反应路由器V4没有导航

需要与重定向帮助在action.js推历史反应路由器V4没有导航

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 browserHistory func后，我用createHistory更改了它。是的它的工作，但它只是改变我的网址，永远不会将我重定向到网址。

任何解决方案？

来源

2017-04-15 ssuhat

在反应路由器V3，browserHistory是单身，你可以用它随时随地浏览到一个特定的路线。但在第4版中，这不会起作用，因为<BrowserRouter>会创建自己的历史记录实例。因此，您应该始终在有权访问路由器实例的组件中更改路由。

下面是我在这种场景中使用的方法。您可以在axios成功回调中调用AUTH_SUCCESS动作，而将响应作为您的动作负载，而不是尝试在动作创建者内部导航。然后让你的减速器根据这个动作改变状态。举一个例子，假设你的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方法的结果，注册部件将接收user作为新的道具。因此，如果定义了user道具，则可以使用组件的componentWillReceiveProps方法更改路线。

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

为了让路由器的history实例作为道具，无论是注册组件应该已经呈现与Route或包裹withRouter

或者作为替代，你可以按照如下的渲染方法使用新<Redirect/>组件。

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

来源

2017-04-15 19:05:45

推历史反应路由器V4没有导航

回答

相关问题