title: Getting error unexpected use of history when trying to redirect?
body: <p>I'm trying to build a login authentication system in where when the user introduces all of his details with the passport authentication module, the user gets redirected to the home page with the <code>history</code> module. But after doing it, it gives mme an error of usage with unexpected use of <code>history</code> when I've looked over some other solutions in stackoverflow and they all seem to make it work this way.</p>
  <pre><code>import React, {useState} from 'react'
  import './login.css'
  import axios from 'axios'
  import { useHistory } from &quot;react-router-dom&quot;;
  
  
  function Login() {
      const [username, setUsername] = useState(&quot;&quot;)
      const [password, setPassword] = useState(&quot;&quot;)
      const [data, setData] = useState(null)
  
      const onChangeUsername = (e) =&gt; {
        setUsername(e.target.value)
      }
  
      const onChangePassword = (e) =&gt; {
        setPassword(e.target.value)
      }
  
      const onSubmit = (e) =&gt; {
        e.preventDefault()
  
        const users = {
          username: username,
          password: password
        }
        axios.post('http://localhost:4000/users/login', users)
        .then(res =&gt; console.log(res.data))
      }
  
      const loginUser = () =&gt; {
        axios.get(&quot;http://localhost:4000/users/user&quot;, {
          withCredentials: true
        }).then(res =&gt; {
          setData(res)
          if(res.status === 200) return history.push(&quot;/home&quot;)
        })
      }
      console.log(data)
  
      return (
          &lt;div&gt;
            &lt;img src=&quot;https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png&quot; className=&quot;twitterlogo____image&quot;/&gt;
            &lt;h1 className=&quot;login_____headertext&quot;&gt;Log in to Twitter&lt;/h1&gt;
            &lt;div className=&quot;placeholder_____global&quot;&gt;
            &lt;form onSubmit={onSubmit}&gt;
              &lt;input className=&quot;placeholder____div&quot; placeholder=&quot;Phone, email or username&quot; onChange={onChangeUsername}/&gt;
              &lt;div&gt;
                &lt;input className=&quot;placeholder____div&quot; placeholder=&quot;Password&quot; type=&quot;password&quot; onChange={onChangePassword}/&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;button className=&quot;twitter___loginbuttonpage&quot; onClick={loginUser}&gt;Log in&lt;/button&gt;
              &lt;/div&gt;
              &lt;/form&gt;
              &lt;div className=&quot;forgetPassword_____div&quot;&gt;
                &lt;p&gt;Forgot password?&lt;/p&gt;
                &lt;p&gt;·&lt;/p&gt;
                &lt;p&gt;Sign up for Twitter&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default Login
  </code></pre>