登录成功时重定向页面[重复]

Question

下面是我的app.js代码，Login.js登录页面位于http：//localhost:3000/Login，所以如果用户成功登录，我如何将用户重定向到http：//localhost:3000/home page，它加载了“homeComponent.jsx”。为了简洁起见，我省略了“homeComponent.jsx”的代码

    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;

Answer 1

使用props.history.push（“/dashboard”）->这不会重新加载页面和更改组件。window.location.href='/dashboard'也可以工作，但这会重新加载页面。

在登录函数中：

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);



        }
    }
}