下面是我的 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;
答案 0 :(得分:0)
使用 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);
}
}
}
答案 1 :(得分:0)
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 */}
)