Qwik组件TypeError: props.redirect不是函数的问题排查

问题1：TypeError: props.redirect is not a function 错误修复 #

错误根源 #

redirect 函数仅能在Qwik服务器端上下文（如routeLoader$、formAction$这类服务器端函数）中使用，组件属于客户端渲染逻辑，无法直接通过组件props获取RequestEvent里的redirect方法，你当前的组件参数解构方式是错误的。

正确解决方案 #

登录成功的跳转逻辑应该放在服务器端的formAction$中处理，直接在action内抛出redirect，这是Qwik处理登录后跳转的标准流程：

export const useFormAction = formAction$<LoginForm>(async (values, { redirect }) => {
    console.log("On Server...");
    try {
        const response = await account.createEmailSession(values.email, values.password);
        console.log("Promise Success: ", response);
        // 登录成功直接在服务器端触发跳转
        throw redirect(302, "/dashboard");
    } catch (error) {
        console.log("Exception Caught: ", error);
        return {
            status: false,
            data: {
                error: {
                    message: error.response.message,
                    code: error.code,
                    type: error.type,
                    version: error.response.version,
                },
            },
            message: "Exception caught when creating user account",
        };
    }
}, zodForm$(loginSchema));

同时删除组件内这段错误的跳转代码：

if (loginForm.response.status) {
    throw redirect(302, "/dashboard");
}

问题2：useNavigate$跳转后的异常分析 #

异常根源 #

useNavigate$是客户端跳转方式，直接使用会带来以下问题：

• 服务器端未完成会话持久化同步，客户端跳转后可能出现权限校验失败；
• 组件内loginForm.response的状态未被重置，后续渲染可能触发重复跳转或无效逻辑；
• 客户端跳转不会触发目标页面的服务器端loader，可能导致页面数据加载异常。

优化方案 #

优先采用上述服务器端redirect的方式，这是最安全且符合Qwik架构设计的方案。如果一定要用客户端跳转，需做如下处理：

import { useNavigate$ } from "@builder.io/qwik-city";

export default component$(() => {
    const nav = useNavigate$();
    const [loginForm, { Form, Field }] = useForm<LoginForm>({
        loader: useFormLoader(),
        action: useFormAction(),
        validate: zodForm$(loginSchema),
    });

    // 用$()包裹跳转逻辑，确保在响应更新后执行
    $(() => {
        if (loginForm.response?.status) {
            nav("/dashboard");
            // 重置响应状态，避免重复触发跳转
            loginForm.response = null;
        }
    });

    // 剩余组件代码...
});

但这种方式仍存在服务器端与客户端状态不一致的风险，不推荐作为登录跳转的首选方案。

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