title: How to configure private routes with react router 4
body: <p>I have the following code for private route component.</p>
  
  <pre><code>import React from 'react';
  import {Route, Redirect} from 'react-router-dom';
  import {connect} from 'react-redux';
  
  class PrivaetRoute extends React.Component {
  
      render() {
          const {component: Component, ...rest} = this.props;
  
          return (
              &lt;Route
                  {...rest}
                  render={props =&gt; this.props.loggedIn ? (
                      &lt;Component {...props}/&gt;
                  ) : (
                      &lt;Redirect
                          to={{
                              pathname: '/',
                              state: {from: this.props.location},
                          }}
                      /&gt;
                  )}
              /&gt;
          )
      }
  }
  
  function mapStateToProps(state) {
      return {
          loggedIn: state.loggedIn
      }
  }
  
  export default connect(mapStateToProps)(PrivaetRoute);
  </code></pre>
  
  <p>and I have the following code for the app component that renders different routes</p>
  
  <pre><code>import React from 'react';
  import {BrowserRouter, Route, Switch} from 'react-router-dom';
  import Reboot from 'material-ui/Reboot';
  
  /**
   * Local
   * */
  
  import IndexPage from '../pages/Index';
  import DashboardPage from '../pages/Dashboard';
  import PrivateRoute from '../containers/PrivateRoutes';
  
  export default class App extends React.Component {
  
      render() {
          return (
              &lt;div&gt;
                  &lt;BrowserRouter&gt;
                      &lt;div&gt;
                          &lt;Reboot/&gt;
                          &lt;Switch&gt;
                              &lt;Route exact path="/" component={IndexPage}/&gt;
                              &lt;PrivateRoute path="/dashboard" component={DashboardPage}/&gt;
                          &lt;/Switch&gt;
                      &lt;/div&gt;
                  &lt;/BrowserRouter&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>How I have designed login system is that my redux action alters the loggedIn state to be true when authentication is complete. I have checked using chrome developer tool that <code>loggedIn</code> state is indeed being set to <code>loggedIn:true</code>; however, when I change the url to <code>/dashboard</code> all the states refreshes (even the redux states) and I get redirected to <code>/</code>. What am I doing wrong?</p>
  
  <p>** edit redux container</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {Provider} from 'react-redux';
  import {createStore, applyMiddleware} from 'redux';
  import reduxThunk from 'redux-thunk';
  import {composeWithDevTools} from 'redux-devtools-extension';
  
  import App from './components/App';
  import reducers from './reducers';
  
  const store = createStore(reducers, {}, composeWithDevTools(applyMiddleware(reduxThunk)));
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;,
      document.querySelector('#root')
  );
  </code></pre>