Redirecting the url after login (react js)

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 🙁

//app.js

import React from "react"
import ValidationLog from "./ValidationLog"
import PostList from "./PostList"
import  {BrowserRouter as Router,Route,Switch,Redirect}  from "react-router-dom"

function App() {
  

  return (
    <Router>
      <div className="App">

        <Switch>
          <Route exact path="/" component={ValidationLog}></Route>
          <Route path="/users" component={PostList}></Route>
        </Switch>
          
      </div>
    </Router>
  )
  
}
export default App

//ValidationLog.js

import React from "react"
import {Formik} from "formik"
import * as Yup from "yup"
import  {BrowserRouter as Router,Route,Switch,Redirect}  from "react-router-dom"


const ValidationLog = () => (
    
    <Formik 
    
     initialValues = {{email: "", password: ""}}
     onSubmit = {(values,{ setSubmitting}) => {
         setTimeout(() => {
            <Redirect to="/users" /> 
            
         }, 500);
     }}
     
     validationSchema = {Yup.object().shape({
        email: Yup.string()
            .email()
            .required("Required"),
        password: Yup.string()
            .required("No password provided")
            .min(8,"Password has to be at least 8 characters.")
     })
            
    }
    >
        {props => {
            const {
                values,
                touched,
                errors,
                isSubmitting,
                handleChange,
                handleBlur,
                handleSubmit
            } = props

            
            
            
            return (
                    
                    <div>
                        

                        <form autoComplete = "off" onSubmit = {handleSubmit}>
                            <h2 style={{fontSize: 22}}>Login to view our user pool</h2>
                            <label htmlFor="email">Email:</label>
                            <input type="text" value={values.email} name="email" onChange={handleChange} onBlur={handleBlur} placeholder="Enter your email" className={errors.email && touched.email && "error"}/>
                            {errors.email && touched.email && (<div className="input-feedback">{errors.email}</div>)}
                            <label htmlFor="email">Password:</label>
                            <input type="password" value={values.password} name="password" onChange={handleChange} onBlur={handleBlur} placeholder="Enter your password" className={errors.password && touched.password && "error"}/>
                            {errors.password && touched.password && (<div className="input-feedback">{errors.password}</div>)}
                            <button type="submit" disabled={isSubmitting}>Login</button>
                            
                        </form>

                    </div>
            )
        }}
    </Formik>
)


export default ValidationLog

The following is what I tried. I tried to add a <Redirect to /users/> in ValidationLog.js

 onSubmit = {(values,{ setSubmitting}) => {
         setTimeout(() => {
            <Redirect to="/users" /> 
            
         }, 500);
     }}

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.

//ValidationLog.js

export let islogin = false
onSubmit = {(values,{ setSubmitting}) => {
         setTimeout(() => {
            islogin = true
            console.log(`Logged in ${islogin}`)
         }, 500);
     }}

//app.js

import ValidationLog,{islogin} from "./ValidationLog"

<Route exact path="/">
  {islogin ? <Redirect to="/users" /> : null}
</Route>

23 thoughts on “Redirecting the url after login (react js)”

Leave a Comment