title: History disappearing as a prop for child in my react app after using Redux's connect()?
body: <p>I am learning React and Redux and I am having a problem with my sample app. I am trying to wire up an app that will navigate to either the login page or the home page depending on whether it is already logged in.</p>
  
  <p>App layer:</p>
  
  <pre><code>import Login from './../connectors/LoginConnector'
  import Index from './../connectors/IndexConnector'
  import Home from './../connectors/HomeConnector'
  
  const App = props =&gt; {
      return(
          &lt;Router&gt;
              &lt;div&gt;
              &lt;Route exact path="/" component={Index}/&gt;
              &lt;Route path="/login" component={Login}/&gt;
              &lt;Route path="/home" component={Home}/&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      )
  }
  export default App
  </code></pre>
  
  <p>Index view:</p>
  
  <pre><code>const Index = (props) =&gt; {
  
      if (props.loggedIn) {
          return(
              &lt;Home/&gt;
          );
      } else {
          return (
              &lt;Login/&gt;
          )
      }
  }
  export default Index
  </code></pre>
  
  <p>Index container component:</p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
      console.log("Index state = ", state)
      return {...state}
  }
  export default connect(mapStateToProps)(Index)
  </code></pre>
  
  <p>Login view:</p>
  
  <pre><code>const Login = (props) =&gt; {
      console.log("Login props = ", props)
      let user, pass
      const login = e =&gt; {
          e.preventDefault();
          props.login(user.value, pass.value)    
          props.history.push("/home");
      };
      return(
        &lt;div&gt;
          &lt;h1&gt;Login&lt;/h1&gt;
          &lt;form onSubmit={login}&gt;
            &lt;label&gt; Username:
              &lt;input type="text" className="form-control col-md-12" ref = {node =&gt; user = node}/&gt;
            &lt;/label&gt;
            &lt;label&gt; Password:
              &lt;input type="password" className="form-control col-md-12" ref = {node =&gt; pass = node}/&gt;
            &lt;/label&gt;
            &lt;br /&gt;
            &lt;input type="submit" value="Submit" /&gt;  
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  export default Login
  </code></pre>
  
  <p>Login container component:</p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
      return {...state}
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          login: (user, pass) =&gt; dispatch(logIn(user, pass))
      }
  }
  export default connect(mapStateToProps, mapDispatchToProps)(Login)
  </code></pre>
  
  <p>The application was working before I added Index (when "/" routed directly to <code>Login</code>), but after adding Index I get <a href="https://i.stack.imgur.com/OnauG.png" rel="nofollow noreferrer">this error when I try to log in</a>. It seems that, when using both React Router and Redux, the <code>history</code> part of <code>props</code> is being erased or somehow not passed to <code>Index</code>'s child component. If I print the <code>props</code> at the top of the <code>Index</code> view and then the <code>Login</code> view, I get <code>{match: {…}, location: {…}, history: {…}, staticContext: undefined, username: null, …}</code> and then <code>{username: null, password: null, loggedIn: false, login: ƒ}</code>. How do I prevent <code>Login</code> from losing important props such as <code>history</code>?</p>