title: Redirecting the url after login (react js)
body: <p>I'm a react js beginner. I got stuck in this problem for many days. I don't know how to redirect to path /users when the login is successful (no validation errors). If anything not clear, please tell me. It's my first time to ask question on stackoverflow. Please help :(</p>
  <p>//app.js</p>
  <pre><code>import React from &quot;react&quot;
  import ValidationLog from &quot;./ValidationLog&quot;
  import PostList from &quot;./PostList&quot;
  import  {BrowserRouter as Router,Route,Switch,Redirect}  from &quot;react-router-dom&quot;
  
  function App() {
    
  
    return (
      &lt;Router&gt;
        &lt;div className=&quot;App&quot;&gt;
  
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot; component={ValidationLog}&gt;&lt;/Route&gt;
            &lt;Route path=&quot;/users&quot; component={PostList}&gt;&lt;/Route&gt;
          &lt;/Switch&gt;
            
        &lt;/div&gt;
      &lt;/Router&gt;
    )
    
  }
  export default App
  
  </code></pre>
  <p>//ValidationLog.js</p>
  <pre><code>import React from &quot;react&quot;
  import {Formik} from &quot;formik&quot;
  import * as Yup from &quot;yup&quot;
  import  {BrowserRouter as Router,Route,Switch,Redirect}  from &quot;react-router-dom&quot;
  
  
  const ValidationLog = () =&gt; (
      
      &lt;Formik 
      
       initialValues = {{email: &quot;&quot;, password: &quot;&quot;}}
       onSubmit = {(values,{ setSubmitting}) =&gt; {
           setTimeout(() =&gt; {
              &lt;Redirect to=&quot;/users&quot; /&gt; 
              
           }, 500);
       }}
       
       validationSchema = {Yup.object().shape({
          email: Yup.string()
              .email()
              .required(&quot;Required&quot;),
          password: Yup.string()
              .required(&quot;No password provided&quot;)
              .min(8,&quot;Password has to be at least 8 characters.&quot;)
       })
              
      }
      &gt;
          {props =&gt; {
              const {
                  values,
                  touched,
                  errors,
                  isSubmitting,
                  handleChange,
                  handleBlur,
                  handleSubmit
              } = props
  
              
              
              
              return (
                      
                      &lt;div&gt;
                          
  
                          &lt;form autoComplete = &quot;off&quot; onSubmit = {handleSubmit}&gt;
                              &lt;h2 style={{fontSize: 22}}&gt;Login to view our user pool&lt;/h2&gt;
                              &lt;label htmlFor=&quot;email&quot;&gt;Email:&lt;/label&gt;
                              &lt;input type=&quot;text&quot; value={values.email} name=&quot;email&quot; onChange={handleChange} onBlur={handleBlur} placeholder=&quot;Enter your email&quot; className={errors.email &amp;&amp; touched.email &amp;&amp; &quot;error&quot;}/&gt;
                              {errors.email &amp;&amp; touched.email &amp;&amp; (&lt;div className=&quot;input-feedback&quot;&gt;{errors.email}&lt;/div&gt;)}
                              &lt;label htmlFor=&quot;email&quot;&gt;Password:&lt;/label&gt;
                              &lt;input type=&quot;password&quot; value={values.password} name=&quot;password&quot; onChange={handleChange} onBlur={handleBlur} placeholder=&quot;Enter your password&quot; className={errors.password &amp;&amp; touched.password &amp;&amp; &quot;error&quot;}/&gt;
                              {errors.password &amp;&amp; touched.password &amp;&amp; (&lt;div className=&quot;input-feedback&quot;&gt;{errors.password}&lt;/div&gt;)}
                              &lt;button type=&quot;submit&quot; disabled={isSubmitting}&gt;Login&lt;/button&gt;
                              
                          &lt;/form&gt;
  
                      &lt;/div&gt;
              )
          }}
      &lt;/Formik&gt;
  )
  
  
  export default ValidationLog
  
  </code></pre>
  <p>The following is what I tried. I tried to add a &lt;Redirect to /users/&gt; in ValidationLog.js</p>
  <pre><code> onSubmit = {(values,{ setSubmitting}) =&gt; {
           setTimeout(() =&gt; {
              &lt;Redirect to=&quot;/users&quot; /&gt; 
              
           }, 500);
       }}
  </code></pre>
  <p>I also tried to set a variable islogin in ValidationLog.js and import in app.js when there is no validation errors but islogin is always false in app.js.</p>
  <p>//ValidationLog.js</p>
  <pre><code>export let islogin = false
  onSubmit = {(values,{ setSubmitting}) =&gt; {
           setTimeout(() =&gt; {
              islogin = true
              console.log(`Logged in ${islogin}`)
           }, 500);
       }}
  </code></pre>
  <p>//app.js</p>
  <pre><code>import ValidationLog,{islogin} from &quot;./ValidationLog&quot;
  
  &lt;Route exact path=&quot;/&quot;&gt;
    {islogin ? &lt;Redirect to=&quot;/users&quot; /&gt; : null}
  &lt;/Route&gt;
  
  </code></pre>