登录成功后重定向页面

21 浏览
0 Comments

登录成功后重定向页面

这个问题已经有了答案：

使用React路由程序化导航

下面是App.js和Login.js的代码

登录页面在http://localhost:3000/login

如果用户成功登录，如何将用户重定向到

http://localhost:3000/home页面，该页面加载\"HomeComponent.jsx\"。我已经省略了代码

“HomeComponent.jsx”为简洁起见

    const App = () => {
      return (
          <>
My App

</> ); }; 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 (

Login

User Name: { setUsername(event.target.value) }} /> Password: { setPassword(event.target.value) }} /> ) } export default Login;

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

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

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

return (
    
Login

                {loginStatus && 
    {/* the rest of your return */}
)

0
0 Comments

使用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);
        }
    }
}

0