为何Next.js中不使用startTransition调用redirect无法生效？

首先得搞清楚Next.js客户端组件里redirect API的运作逻辑：它不是像传统的window.location.href那样直接修改地址栏跳转，而是依赖React的更新上下文来通知路由系统执行跳转操作。如果不在React的更新流程里调用它，路由系统根本“听不到”这个跳转指令。

再看你的代码场景：

• 当你直接在onClick回调里调用redirect('/')时，这段代码是同步执行的，此时React还没进入任何更新周期，相当于你在React的“工作流程外”发了一个跳转请求，路由系统自然不会响应。
• 而把redirect放在startTransition内部时，startTransition会把里面的函数标记为非紧急更新任务，并交给React去调度执行。当这个函数被React调度运行时，就处于React的更新上下文里了，redirect发出的跳转指令能被路由系统正确捕获，进而执行跳转。

补充个小知识点：不止startTransition能解决这个问题，你把redirect放在useEffect里，或者放在状态更新的回调中（比如setState(() => { redirect('/') })），也能生效——本质都是让redirect在React的更新流程里被调用。

你的代码示例：

'use client';

const [isPending, startTransition] = useTransition();

const _skipAction = useCallback((e: React.MouseEvent) => {
    e.preventDefault();

    // 此代码生效
    startTransition(async () => {
      redirect('/');
    });

    // 此代码无效 - 点击事件被忽略
    // redirect('/');
  }, []);

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