Redirect Page when login is successful [duplicate]

Question

Below is my code for App.js and Login.js Login page is at http://localhost:3000/login So if user successfully login how can I redirect the user to http://localhost:3000/home page which loads the "HomeComponent.jsx" .I have omitted the code for "HomeComponent.jsx" for brevity

    const App = () => {
      return (
        <div className="App">
          <>
            <header className="App-header">My App </header>
            <Router>
    
              <Route path="/login" exact component={Login} />
    
            </Router>
          </>
    
    
        </div>
      );
    
    };



import React, { useState, props } from 'react';
import LoginStatus from './LoginStatus';

const Login = () => {

    const [username, setUsername] = useState('my user name');
    const [password, setPassword] = useState('pass');
    const [loginStatus, setloginStatus] = useState(true);


    const loginClicked = () => {
        if (username === 'xyz' && password === 'pass') {
            console.log("Login Success");
            console.log("login loginStatus " + loginStatus);

            setloginStatus(true);
        } else {
            console.log("Login Failed");
            setloginStatus(false);
            console.log("login loginStatus " + loginStatus);



        }
    }


    return (
        <div>
            <h1>Login</h1>
            <div className="container">

                <LoginStatus loginStatus={loginStatus}></LoginStatus>

                User Name: <input type="text" name="username" value={username}
                    onChange={(event) => { setUsername(event.target.value) }}
                />

                    Password: <input type="password" name="password" onChange={(event) => { setPassword(event.target.value) }} />
                <button className="btn btn-success" onClick={loginClicked} >Login</button>
            </div>
        </div>
    )
}


export default Login;

Wai Ha Lee · Accepted Answer · 2021-01-13 17:04:01Z

0

Use props.history.push('/dashboard') -> This won't reload the page and changes the component. window.location.href='/dashboard' also works but this reloads the page.

Inside your Login Function:

const Login = () => {

    const [username, setUsername] = useState('my user name');
    const [password, setPassword] = useState('pass');
    const [loginStatus, setloginStatus] = useState(true);


    const loginClicked = () => {
        if (username === 'xyz' && password === 'pass') {
            console.log("Login Success");
            console.log("login loginStatus " + loginStatus);

            setloginStatus(true);
          // If login succeeds then redirect
          props.history.push('/dashboard') 
          // 
           
        } else {
            console.log("Login Failed");
            setloginStatus(false);
            console.log("login loginStatus " + loginStatus);



        }
    }
}

edited Jan 13, 2021 at 17:04

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Jan 13, 2021 at 11:18

Sulav Sapkota

861 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh · Accepted Answer · 2021-01-13 11:19:54Z

0

React Router provides a Redirect component that will redirect if it is present in the DOM.

<Redirect to="/home" />

I would, using the state condition of your loginStatus, render inside your Login component's return like so:

return (
    <h1>Login</h1>
            <div className="container">
                {loginStatus && <Redirect  to="/home" />
    {/* the rest of your return */}
)

answered Jan 13, 2021 at 11:19

Josh

265 bronze badges

Collectives™ on Stack Overflow

Redirect Page when login is successful [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related