登录以重定向到其他页面

Posted 2023-02-22

【中文标题】登录以重定向到其他页面

【英文标题】：Login to redirect to other page

【发布时间】：2021-11-06 05:29:16

【问题描述】：

单击Login 按钮后，我无法从登录页面重定向到/profile 页面。我该如何解决？

import React from "react";
import  useHistory  from "react-router-dom";

function Login() 
  const history = useHistory();

  function checkLogin() 
    const loginFormUser = document.getElementById("login-form-user");
    const loginFormPassword = document.getElementById("login-form-password");
    const loginButton = document.getElementById("login-form-submit");
    loginButton.addEventListener("click", () => 
      const username = loginFormUser.username.value;
      const password = loginFormPassword.password.value;

      if (username === "toilacoder" && password === "123456") 
        return history.push("/profile");
       else 
        return history.push("/home");
      
    );
  

  return (
    <form onSubmit=checkLogin>
      <h2>Please login to get access to your profile.</h2>
      <input type="text" placeholder="Username" id="login-form-user" />
      <input
        type="password"
        placeholder="Your password"
        id="login-form-password"
      />
      <button id="login-form-submit" type="submit">
        Login
      </button>
    </form>
  );

export default Login;

【问题讨论】：

我会这样做的。谢谢，先生！

这能回答你的问题吗？ ***.com/questions/11563638/… 删除 .username 和 .password 作为错字。您也可以为此 reactjs.org/docs/refs-and-the-dom.html

使用 refs

它没有将我重定向到 /profile 但它重新加载并给我“/login?”

【参考方案1】：

您应该将事件参数传递给您的 checkLogin 函数。 然后，您将使用它通过调用preventDefault 函数来防止表单提交的默认行为。

另外，addEventListener 也没用，因为您已经在单击按钮时触发了 checkLogin 函数。

最后，在使用getElementById 检索元素后，您可以在不指定username 和password 属性的情况下从DOM 元素中检索值。

尝试像这样更改您的代码：

function checkLogin(e) 
  e.preventDefault();

  const loginFormUser = document.getElementById("login-form-user");
  const loginFormPassword = document.getElementById("login-form-password");

  const username = loginFormUser.value.trim();
  const password = loginFormPassword.value.trim();

  if (username === "toilacoder" && password === "123456") 
    history.push("/profile");
   else 
    history.push("/home");