Push history at actions react-router v4 doesn't navigate - reactjs

Question

Need help with redirect at 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});
})
}
}
At past I can use browserHistory.push('/') and it will redirect me to /. After using React Router v4 browserHistory func is gone.And I change it using createHistory. Yes it work but it only change my url never redirect me to the url.
Any solution?

Answer 1

In react router v3, browserHistory was a singleton and you can use it anywhere to navigate to a specific route. But in v4, this won't work as <BrowserRouter> creates its own history instance. Therefore, you should always change your route inside a component where you have access to history instance of the router.
Here is the approach which I use in this kind of scenarios. Instead of trying to navigate inside your action creator, you can dispatch AUTH_SUCCESS action in axios success callback with the response as your action payload. Then make your reducer to change the state based on this action. As an example let's say your reducer change the user attribute in your state as follows.
case types.AUTH_SUCCESS:
return Object.assign({}, state, {
user: action.user,
});
Also, your SignUp component (or whatever the component which you call signUp method) should have been connected to user attribute in the state as a prop. If you are using redux and react-redux it might be something looks like this.
function mapStateToProps(state) {
return {
user: state.user
};
}
export default connect(mapStateToProps)(SignUp);
Now when the user change as result of signUp method, SignUp component will receive the user as a new prop. So you can use the component's componentWillReceiveProps method to change your route if the user prop is defined.
componentWillReceiveProps(newProps){
if(newProps.user){
this.props.history.push('/')
}
}
To get the router's history instance as a prop, either SignUp component should have been rendered with Route or wrapped with withRouter
Or as an alternative you can use new <Redirect/> component in your render method as follows.
render(){
return this.props.user ? (<Redirect to="/" />) : (...your current JSX code for SignUp component);
}