React中带条件的handleSubmit页面跳转问题：密码匹配时跳转失效

问题描述 #

注册表单提交时，密码与确认密码不匹配的提示功能正常，但密码匹配时无法跳转到Dashboard页面。

问题原因 #

Log.jsx里的handleSubmit函数中，尝试返回<Link>组件实现跳转是错误的。<Link>是声明式导航组件，只能在组件的JSX渲染结构中使用，在事件处理函数里无法通过返回它来触发页面跳转，必须使用编程式导航。

修复步骤 #

1. 从react-router-dom中导入useNavigate钩子
2. 在Log组件内部初始化导航函数
3. 修改handleSubmit，密码匹配时调用导航函数跳转

修改后的Log.jsx代码 #

import React from "react";
import "./log.css";
import { useState, useNavigate } from "react"; // 新增useNavigate导入

export default function Log() {
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    password: "",
    passwordConfirm: "",
  });
  const navigate = useNavigate(); // 初始化导航函数

  function handleChange(event) {
    const { name, value } = event.target;
    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }));
  }

  function handleSubmit(event) {
    event.preventDefault();
    if (formData.password === formData.passwordConfirm) {
      // 替换返回Link的写法，调用编程式导航
      navigate("/Dashboard");
    } else {
      alert("Passwords do not match");
    }
  }

  return (
    <div className="loginn">
      <div className="login-items">
        <div className="title-log">
          <p className="login-title">sing up</p>
        </div>

        <form className="form" onSubmit={handleSubmit}>
          <span className="fullname">Fullname</span>
          <input
            className="input-lg"
            type="name"
            placeholder="Email address"
            name="fullName"
            onChange={handleChange}
            value={formData.fullName}
          ></input>
          <span className="email">Email</span>
          <input
            className="input-lg"
            type="email"
            name="email"
            onChange={handleChange}
            value={formData.email}
          ></input>
          <span className="password">Password</span>
          <input
            className="input-lg"
            type="password"
            name="password"
            onChange={handleChange}
            value={formData.password}
          ></input>
          <span className="password">Confirm Password</span>
          <input
            className="input-lg"
            type="password"
            name="passwordConfirm"
            onChange={handleChange}
            value={formData.passwordConfirm}
          ></input>
          <button className="login-btn">Sing up</button>
        </form>
      </div>
    </div>
  );
}

验证说明 #

你的App.js中已经正确配置了/Dashboard的路由，修改后重新运行项目，当密码与确认密码匹配时，点击注册按钮就能成功跳转到Dashboard页面了。

内容的提问来源于stack exchange，提问作者khalid dahir