title: How To Redirect to Login Page Before Entering Index Route in ReactJS + REDUX
body: <p>I am really new to react, now i want to implement a login page before entering to any routes, i am currently using :</p>
  
  <p>React : 15.4.2,
  React-DOM : 15.4.2,
  React-Redux : 5.0.4,
  and i am using webpack and es2015 as my preset.</p>
  
  <p>i have done so much googling, but i still does not found any solution, here is current source code :
  for index.js : </p>
  
  <pre><code>import React from "react";
  import ReacrDOM from "react-dom";
  import {Router, Route, IndexRoute, hashHistory} from "react-router"
  import {Provider} from "react-redux";
  
  import store from "./store";
  import Layout from "./pages/Layout";
  import Dashboard from "./pages/Dashboard";
  import Login from "./pages/login/index";
  import User from "./pages/user/index";
  import EnsureLoggedIn from "./EnsureLoggedIn";
  
  const app = document.getElementById("app");
  
  ReacrDOM.render(
      &lt;Provider store={store}&gt;
          &lt;Router history={hashHistory}&gt;
              &lt;Route path="/login" component={Login}/&gt;
              &lt;Route component={EnsureLoggedIn}&gt;
                  &lt;Route path="/" component={Layout}&gt;
                      &lt;IndexRoute component={Dashboard}/&gt;
                      &lt;Route path="user" component={User}/&gt;
                  &lt;/Route&gt;
              &lt;/Route&gt;
          &lt;/Router&gt;
      &lt;/Provider&gt;
      , app);
  </code></pre>
  
  <p>Here is my Dashboar Component : </p>
  
  <pre><code>import React from "react";
  import {connect} from "react-redux";
  
  @connect((store) =&gt; {
      return {
  
      }
  })
  
  export default class Dashboard extends React.Component {
  
      componentWillMount() {
  
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;h3&gt;Dashboard&lt;/h3&gt;
                  &lt;hr/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>and here is my EnsureLoggedIn File :</p>
  
  <pre><code>import React from "react";
  import {browserHistory} from 'react-router';
  import {connect} from "react-redux";
  import {login_check, show_log} from "./actions/logActions";
  
  @connect((store) =&gt; {
      return {
          session_key: store.logReducer.session_key,
          user_id: store.logReducer.user_id,
          error_message: store.logReducer.error_message,
          logged_in: store.logReducer.logged_in
      }
  })
  
  
  export default class EnsureLoggedIn extends React.Component {
      componentDidMount() {
  
          if (!this.isLoggedIn()) {
              browserHistory.push('#/login');
          }
      }
  
      isLoggedIn() {
          this.props.dispatch(show_log());
          var account = {user_id: this.props.user_id, session_key: this.props.session_key};
          this.props.dispatch(login_check(account));
          if (!this.props.logged_in) {
              return false;
          }
  
          return true;
      }
  
      render() {
          return this.props.children
      }
  }
  </code></pre>
  
  <p>and here is my logReducer :</p>
  
  <pre><code>export default function (state = {
      user_id: null,
      session_key: null,
      error_message: null,
      logged_in: false,
      log_error: null,
  }, action) {
  
      switch (action.type) {
          case "LOGIN": {
              var {id, session_key}=action.payload.data.data
              state = {
                  ...state,
                  user_id: id,
                  session_key,
                  error_message: null,
                  logged_in: true,
                  log_error: null
              };
              break;
          }
  
          case "LOGIN_FAILED": {
              state = {
                  ...state,
                  error_message: null,
                  log_error: action.payload.response.data.error.message,
                  logged_in: false
              };
              break;
          }
  
          case "CHECK_LOGIN": {
              state = {...state, error_message: null, logged_in: true};
              break;
          }
  
          case "CHECK_LOGIN_FAILED": {
              state = {
                  ...state,
                  error_message: action.payload.response.data.error.message,
                  log_error: null,
                  logged_in: false
              };
              break;
          }
  
          case "LOGOUT": {
              state = {
                  ...state,
                  user_id: null,
                  session_key: null,
                  error_message: null,
                  log_error: null,
                  logged_in: false
              };
              break;
          }
  
          case "GET_LOG_DATA": {
              state = {...state};
              break;
          }
  
      }
  
      return state;
  }
  </code></pre>
  
  <p>and this is my logActions file :</p>
  
  <pre><code>import axios from "axios";
  
  const basicAuth = {
      headers: {"authorization": "Basic dmlkeTpwdmlkeQ=="}
  }
  
  export function login(email = "", password = "") {
      var url = 'http://localhost:8080/dfordatabase/api/api/login';
      return function (dispatch) {
          axios.post(url, {email: email, password: password}, basicAuth)
              .then((response) =&gt; {
                  dispatch({type: "LOGIN", payload: response});
              }).catch((error) =&gt; {
              dispatch({type: "LOGIN_FAILED", payload: error});
          })
      }
  }
  
  export function login_check(account = {}) {
      var url = 'http://localhost:8080/dfordatabase/api/api/login_check';
      return function (dispatch) {
          axios.post(url, {...account}, basicAuth)
              .then((response) =&gt; {
                  dispatch({type: "CHECK_LOGIN", payload: response});
              }).catch((error) =&gt; {
              dispatch({type: "CHECK_LOGIN_FAILED", payload: error});
          })
      }
  }
  
  export function show_log() {
  
      return function (dispatch) {
          dispatch({type: "GET_LOG_DATA", payload: null});
      }
  }
  </code></pre>
  
  <p>the problem is : indeed login page will appear at first when i run the code, but when i fill the credential and logged in, page is not redirect to my index route which is "/", the url has change, but dashboard won't appear, if i refresh the page dashboard appear but, the problem is all state of my log reducer become empty again.</p>
  
  <p>can anyone tell me where can i find some example of similar development tutorial. Please kindly help me..</p>