useNavigate跳转异常：URL变更但页面未跳转，提交后URL出现问号

核心问题点 #

1. RoomContext 使用错误：直接将整个 Context 对象赋值给 onSubmit，而 Context 提供的是包含 room 和 setRoom 的对象，无法直接作为函数调用。
2. 变量名冲突：组件内部的 setRoom（useState 生成）与 Context 中的 setRoom 重名，导致状态更新逻辑混乱。
3. 错误获取输入值：尝试从表单元素（e.target）获取 value，但表单本身没有 value 属性，应该使用组件内部维护的输入状态。
4. 可能的表单绑定缺失：若 <form> 标签未正确绑定 onSubmit={handleSubmit}，e.preventDefault() 不会生效，导致页面重载。

修正后的代码示例 #

1. 修正 JoinRoom 组件逻辑

import { useContext, useState } from "react";
import { useNavigate } from "react-router-dom";
import { RoomContext } from "../context/RoomContext";
import spacesLogo from "../img/SpacesLogo.png";

const JoinRoom = () => {
  // 重命名内部状态，避免与 Context 的 setRoom 冲突
  const [inputRoom, setInputRoom] = useState("");
  // 从 Context 中解构出需要的 setRoom 方法
  const { setRoom } = useContext(RoomContext);
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault(); // 确保阻止表单默认提交行为
    const roomValue = inputRoom.trim();
    
    if (roomValue) {
      // 更新 Context 中的房间号
      setRoom(roomValue);
      // 跳转到聊天页面
      navigate("/live_chat");
    }
  };

  return (
    <div>
      {/* 确保表单绑定 handleSubmit */}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputRoom}
          onChange={(e) => setInputRoom(e.target.value)}
          placeholder="输入房间号"
        />
        <button type="submit">加入房间</button>
      </form>
    </div>
  );
};

export default JoinRoom;

2. 验证路由配置

确保你的路由配置中，ProtectedRoute 组件逻辑正确，不会在跳转时拦截合法请求。如果 ProtectedRoute 依赖用户登录状态，需确认当前用户已通过认证，否则会被重定向回登录页（可能表现为页面无跳转）。

额外排查步骤 #

• 打开浏览器控制台，添加 try-catch 捕获 handleSubmit 中的错误，确认是否有隐性报错：

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const roomValue = inputRoom.trim();
      if (roomValue) {
        setRoom(roomValue);
        navigate("/live_chat");
      }
    } catch (err) {
      console.error("提交错误:", err);
    }
  };
  

• 检查提交按钮的 type 属性是否为 submit，若设置为 button 则不会触发表单提交事件。

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