title: Navigate to Home page on User Login Success in react + redux + react-router-redux
body: <p>Application requirement goes like this: </p>
  
  <p>1) Have a login form with simple user name and password <BR/>
  2) Once user submit the login form user should navigate to home component </p>
  
  <p>in order to do this , i have configured redux with react-router-redux </p>
  
  <p>Problem : <br/>
  Upon sending a correct username and password , server authenticates and sends the correct token , but now i managed to show the correct routing in URL , but the component doesn't load ,</p>
  
  <p>Here is my file </p>
  
  <p>LoginForm <br/></p>
  
  <pre><code>import React, { Component } from 'react'
  import { Button, Form, FormGroup, FormControl, ControlLabel, Checkbox, Col } from 'react-bootstrap';
  import { bindActionCreators } from 'redux';
  import { connect } from 'react-redux';
  import { userAuthentication } from '../actions/userActions';
  
  
  class LoginForm extends Component {
  
      constructor(props) {
          super(props)
          this.state = {
              email: '',
              password: ''
          }
          this.onChange = this.onChange.bind(this);
          this.onFormSubmit = this.onFormSubmit.bind(this);
      }
  
  
      onChange(e) {
          this.setState({ [e.target.name]: e.target.value });
      }
  
      onFormSubmit(e) {
          e.preventDefault();
          this.props.userAuthentication(this.state)
      }
  
      render() {
          //const { user, token } = this.props.userState;
          const formInstance = (
              &lt;div&gt;
                  {/*{token ? &lt;p&gt;{token}&lt;/p&gt; : "null"}*/}
                  &lt;Form horizontal onSubmit={this.onFormSubmit}&gt;
                      &lt;FormGroup controlId="formHorizontalEmail"&gt;
                          &lt;Col componentClass={ControlLabel} sm={2}&gt;
                              Email
                    &lt;/Col&gt;
                          &lt;Col sm={5}&gt;
                              &lt;FormControl type="email" name="email" onChange={this.onChange} value={this.state.email} placeholder="Email" /&gt;
                          &lt;/Col&gt;
                      &lt;/FormGroup&gt;
                      &lt;FormGroup controlId="formHorizontalPassword"&gt;
                          &lt;Col componentClass={ControlLabel} sm={2}&gt;
                              Password
                      &lt;/Col&gt;
                          &lt;Col sm={5}&gt;
                              &lt;FormControl type="password" name="password" onChange={this.onChange} value={this.state.password} placeholder="Password" /&gt;
                          &lt;/Col&gt;
                      &lt;/FormGroup&gt;
                      &lt;FormGroup&gt;
                          &lt;Col smOffset={2} sm={10}&gt;
                              &lt;Checkbox&gt;Remember me&lt;/Checkbox&gt;
                          &lt;/Col&gt;
                      &lt;/FormGroup&gt;
                      &lt;FormGroup&gt;
                          &lt;Col smOffset={2} sm={10}&gt;
                              &lt;Button type="submit"&gt;
                                  Sign in
                           &lt;/Button&gt;
                          &lt;/Col&gt;
                      &lt;/FormGroup&gt;
                  &lt;/Form&gt;
              &lt;/div&gt;
          );
          return (formInstance);
      }
  }
  
  
  function mapDispatchToProps(dispatch) {
      return bindActionCreators({ userAuthentication: userAuthentication }, dispatch)
  }
  
  export default connect(null, mapDispatchToProps)(LoginForm);
  </code></pre>
  
  <p>action<br/></p>
  
  <pre><code>import { WS_URL } from '../utill/types';
  import axios from 'axios';
  import { push } from 'react-router-redux'
  
  export function userAuthentication(userData){
      return function (dispatch) {
          dispatch({type: 'USER_LOGIN'});
          axios.post(WS_URL+'/authenticate', 
          userData,
          {headers:{
              'Access-Control-Allow-Origin': '*'
           }}
          )
          .then(function (response){
            dispatch({type: 'USER_LOGIN_COMPLETED', payload: response.data})
             dispatch(push('/home'))
             //push('/home')
          })
          .catch(function (error){    
             dispatch({type: 'USER_LOGIN_REJECTECTED', payload: error})
          });
      }   
  }
  </code></pre>
  
  <p>index.js <br/></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from "react-redux"
  import createHistory from 'history/createBrowserHistory'
  import { Route } from 'react-router'
  import { ConnectedRouter } from 'react-router-redux'
  //import Routes from './js/utill/routes'
  import registerServiceWorker from './registerServiceWorker';
  import './css/index.css';
  import store from "./store"
  import App from './js/components/App';
  import Home from './js/components/Home';
  import LoginPage from './js/containers/LoginPage';
  
  const history = createHistory()
  
  ReactDOM.render( &lt;Provider store={store}&gt; 
     &lt;ConnectedRouter history={history}&gt;
          &lt;div&gt;
              &lt;Route exact path="/" component={App}/&gt;
              &lt;Route path="/login" component={LoginPage}/&gt;
              &lt;Route path="/home" component={Home}/&gt;
          &lt;/div&gt;
      &lt;/ConnectedRouter&gt;
  &lt;/Provider&gt;
  , document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>store.js <br/></p>
  
  <pre><code>import { applyMiddleware, createStore } from 'redux'
  import logger from 'redux-logger'
  import { routerMiddleware,routerReducer } from 'react-router-redux';
  import thunk from "redux-thunk"
  import reducers from './js/reducers'
  import createHistory from 'history/createBrowserHistory'
  import { combineReducers } from 'redux'
  
  const history = createHistory()
  
  const combinedReducers = combineReducers({
      ...reducers,
      router: routerReducer
    })
  
  const middleware = applyMiddleware(logger , thunk, routerMiddleware(history));
  
  export default createStore(combinedReducers, middleware)  
  </code></pre>
  
  <p>dependency list <br /></p>
  
  <pre><code>"axios": "^0.16.2",
      "history": "^4.6.2",
      "react": "^15.6.0",
      "react-bootstrap": "^0.31.0",
      "react-dom": "^15.6.0",
      "react-facebook-login": "^3.6.1",
      "react-google-login": "^2.9.2",
      "react-redux": "^5.0.5",
      "react-router-redux": "^5.0.0-alpha.6",
      "redux": "^3.6.0",
      "redux-logger": "^3.0.6",
      "redux-promise": "^0.5.3",
      "redux-thunk": "^2.2.0"
  </code></pre>
  
  <p>Can someone help me why this routing not working , </p>