How to navigate to another page in react router v4 in the action

Question

I am building an application that has a login screen and dashboard. When i successfully login i want my app to go to the dashboard but when i call a history.push('/dashboard'); in my ACTION(i think the history push will be called here after a promise). The URL changes but does not render the view.

My Login Component :

onSubmit(values){
    this.props.loginUser(values);
  }
render(){
return(
  <div>
    <form onSubmit={this.props.handleSubmit(this.onSubmit.bind(this))}>
      <Field
        label='Username'
        name='username'
        component={this.renderField}
        type="text"
      />

      <Field
        label='Password'
        name='password'
        component={this.renderField}
        type="password"
      />

      <button type="submit">Login</button>
    </form>
    {this.renderError()}
  </div>
);}}


    function mapStateToProps({profile}){
  return {profile};
}

export default reduxForm({
  validate,
  form:'LoginForm'
})(withRouter(connect(mapStateToProps,{loginUser})(Login)))

My Action :

export function loginUser(values){
  return dispatch => axios.post(`${ROOT_URL}verifyuser`,values)
    .then((response)=>{
      if(response.data.code == 'success'){

        dispatch(success(response.data),history.push('/dashboard'));
      }else{
        dispatch(failure(response.data));
      }
    })

    function success(response) { return {type:userConstants.LOGIN_SUCCESS,payload:response}; }
    function failure(response) { return { type: userConstants.LOGIN_FAILURE, payload:response } }
}

My Dashboard Component :

class Dashboard extends Component {

  render(){
    return(
      <div>Test</div>
    );
  }
}

MY routing

const App = () => (
  <Switch>
    <Route path="/dashboard" component={Dashboard}/>
    <Route exact path="/" component={Login} />
  </Switch>
)

ReactDOM.render(
  <Provider store={createStore(reducers,applyMiddleware(promise,thunk))}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
  , document.getElementById('root'));

Please look into this https://stackoverflow.com/questions/48799733/react-router-4-and-props-history-push/48799841#48799841 Please let me know if still not working — RIYAJ KHAN, Jun 14 '18 at 06:45

score 0 · Answer 1 · answered Jun 14 '18 at 06:18

0

If the url changed, then it means, the history.push has worked, so I guess you have missed to add this route in your Routes Add,

<Route path='/dashboard' component={Dashboard}/>

answered Jun 14 '18 at 06:18

Rohith Murali

5,551
2
25
26

Hello I have edited my code and added my routing to the question. I am puzzled why it is not rendering – Marco Jun 14 '18 at 06:31
Ideally, it is supposed to change if you have defined your Route like that and when you are able to change the url using push(), the respective component mentioned in the route should be displayed. Can you create a codesandbox for this. That would be perfect to debug this situation. – Rohith Murali Jun 14 '18 at 06:36
Hi please see this. https://codesandbox.io/s/2ownkp342r – Marco Jun 14 '18 at 06:50

How to navigate to another page in react router v4 in the action

1 Answers1