React项目中useNavigate跳转失效问题求助

你的代码确实存在错误导致跳转失效，核心问题出在第二个.then回调里：

.then((data) => {
  console.log("Login Success", data);

  return fetch(getMainURL, {
    headers: {
      "Content-Type": "application/json",
      "Who": "Admin",
    },
  })
  navigate("/main"); // 这行代码永远不会执行！
})

因为return fetch(...)语句会直接结束当前函数的执行，后面的navigate("/main")根本没有运行的机会。

修复步骤 #

• 如果不需要调用getMainURL这个接口，直接删除return fetch相关代码，保留跳转逻辑即可：

  .then((data) => {
    console.log("Login Success", data);
    navigate("/main");
  })
  

• 如果必须先调用getMainURL再跳转，需要把navigate放到这个请求的.then回调里：

  .then((data) => {
    console.log("Login Success", data);
    return fetch(getMainURL, {
      headers: {
        "Content-Type": "application/json",
        "Who": "Admin",
      },
    })
  })
  .then((res) => {
    console.log("res", res)
    navigate("/main"); // 在这里执行跳转
  })
  

额外检查点 #

• 确认已在组件内正确初始化useNavigate：

  const navigate = useNavigate();
  

• 检查路由配置文件，确认已注册/main对应的路由，比如：

  <Route path="/main" element={<Main />} />
  

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