React路由导航异常：跳转Planets组件时路径错误

你当前使用navigate('Planets')时，React Router会将其视为相对路径，基于当前组件所在的路由路径（/Registration）进行拼接，因此生成了错误的/Registration/Planets路径。

解决方案 #

将跳转路径改为绝对路径，在开头添加斜杠/，这样React Router会从根路径开始解析：

修改handleSubmit函数中的跳转代码：

navigate('/Planets'); // 改为带斜杠的绝对路径

完整修改后的handleSubmit函数：

function handleSubmit(event) {
  //Prevent page reload
  event.preventDefault();

  var { uname } = document.forms[0];

  // Find user login info
  const userData = database.find((user) => user.username === uname.value);

  // Compare user info
  if (userData) {
    if (userData.username === uname.value) {
      // Invalid password
      setErrorMessages({ name: 'uname', message: errors.uname });
    }
  } else {
    // Username not found
    setIsSubmitted(true);
    navigate('/Planets'); // 这里修改为绝对路径
    alert();
  }
}

额外提示 #

你的表单中有多个input使用了相同的name="pass"属性（密码、名字、姓氏字段），这会导致后续获取表单值时出现混淆，建议分别设置唯一的name值，比如password、firstName、lastName。

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