React Router手动输入路径时useNavigate.navigate跳转不生效问题

这个写法的本质错误是违反React副作用执行规则，把导航动作放在了渲染阶段触发，直接导致两种访问场景下表现不一致，具体问题点如下：

• 渲染阶段禁止执行副作用：React组件的渲染过程是可中断、可重复执行的，所有导航、状态修改、接口请求这类副作用，必须放在useEffect回调或者用户事件回调中执行，不能直接在组件渲染计算（也就是return JSX的阶段）直接调用。
• 两种场景表现差异的根源：
  • 通过页面UI操作跳转时，React应用已经完成全量挂载，路由上下文是就绪状态，此时渲染阶段触发navigate属于"歪打正着"，路由实例刚好能接收到跳转指令，所以看起来功能正常。
  • 手动输入地址直接访问属于全新的页面冷启动，组件首次渲染时React Router的路由状态还没完成初始化，此时调用navigate根本不会被路由实例处理，等路由初始化完成后组件也不会重新执行渲染逻辑，跳转指令直接丢失，因此不会按预期重定向。
• 遗漏的逻辑点：现有逻辑只在组件初始化时读取一次localStorage中的token，不会动态响应登录态变化——如果用户在页面停留期间token过期、或者手动清除了本地存储的token，组件不会感知到状态变化，不会自动触发跳转，鉴权逻辑是静态失效的。

把导航跳转逻辑移入useEffect中执行，保证副作用在组件挂载完成、路由上下文完全就绪后触发，同时增加空返回避免未授权时短暂露出受保护内容：

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

const DetailView = () => {
  const navigate = useNavigate();
  const token = localStorage.getItem('token');

  useEffect(() => {
    if (!token) {
      navigate("/", { replace: true });
    }
  }, [token, navigate]);

  // 未登录时不渲染受保护内容，避免内容闪屏
  if (!token) return null;

  return <h2>DetailView</h2>;
};

export default DetailView;

更优实践：这类通用的路由鉴权逻辑不要散落在每个业务组件中，建议抽成统一的ProtectedRoute受保护路由包装组件，全局统一处理登录校验和重定向，避免重复代码和逻辑遗漏。

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