Question

下面是我的 App.js 和 Login.js 代码登录页面位于 http://localhost:3000/login 因此，如果用户成功登录，我如何将用户重定向到 http://localhost:3000/home 加载“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);



        }
    }
}

Answer 2

React Router 提供了一个 Redirect 组件，如果它存在于 DOM 中，它将重定向。

<Redirect to="/home" />

我会使用您的 loginStatus 的状态条件，在您的 Login 组件的返回中呈现如下：

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

登录成功后重定向页面

2 个答案: