React JS直接访问组件链接时如何调用navigate跳转回登录页

1. 初始报错原因：你在组件的同步渲染逻辑中直接调用navigate()，React Router v6 禁止在渲染阶段直接触发导航操作，这类副作用操作必须放到useEffect回调、事件处理函数这类非渲染执行的流程中。
2. 你写的useEffect未触发的常见排查点：

• 未正确从react包导入useEffect
• 你在useEffect定义之前就有其他条件返回逻辑，导致useEffect没有被注册（React Hook 必须在组件顶层调用，不能放在条件判断之后）
• useLocation未从react-router-dom包导入，导致state取值异常

这是最符合 React 声明式写法、也最省心的方案，不需要调用useEffect，直接根据条件返回重定向组件即可：

import { useLocation, Navigate } from "react-router-dom";

export default function Addblousesalwar() {
  const { state } = useLocation();

  // 直接判断state，不存在就返回重定向组件
  if (state === null || state === undefined) {
    return <Navigate to="/login" replace />
  }

  // 后面是你正常的组件逻辑
  return (
    <div>
      {/* 页面内容 */}
    </div>
  )
}

replace参数的作用是替换当前历史栈记录，避免用户点击返回按钮回到这个无需授权的页面。

确保所有Hook调用都在组件最顶层，没有被条件判断阻断：

import { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";

export default function Addblousesalwar() {
  const navigate = useNavigate();
  const { state } = useLocation();

  useEffect(() => {
    if (state === null || state === undefined) {
      navigate("/login", { replace: true });
    }
  }, [state, navigate]);

  // 正常组件逻辑
  return (
    <div>
      {/* 页面内容 */}
    </div>
  )
}

注意要把navigate也加入依赖数组，符合React Hook的依赖规则，避免闭包问题。

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