Redirecting the url after login (react js) Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Redirecting the url after login (react js) without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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>

Answer

<Redirect ... /> is a JSX-Construct to create a component at this position. By itself this does not do anything in imperative code-paths like your onSubmit handler.

What you are looking for is an imperative function that you can call outside a React-Tree. Like from the useHistory hook from react-router.

import { useHistory } from "react-router-dom";

...

const history = useHistory();

...

  onSubmit={() => history.push("/home")}

More specifically for your example:

const ValidationLog = () => {
  const history = useHistory();
  return (
    
    <Formik 
    
     initialValues = {{email: "", password: ""}}
     onSubmit = {(values,{ setSubmitting}) => {
         setTimeout(() => {
            history.push(...)
            
         }, 500);
     }}
...
We are here to answer your question about Redirecting the url after login (react js) - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji