我目前正在开发一个Next.js应用程序,其中的app目录中有一个布局组件.在该组件中,我有一个导航栏客户端组件.我正在try 实现注销功能,在该功能中,单击导航栏上的按钮应该会使用服务器端路由将用户重定向到原始页面.然而,它并没有像预期的那样起作用.

当我单击注销按钮时,服务器日志(log)确认正在呼叫该路由,并且我得到了一个"Status:200OK"响应,但没有发生重定向.

以下是该路由的代码片段:

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export const dynamic = 'force-dynamic';

export async function POST(request: Request) {
  const requestUrl = new URL(request.url);
  const supabase = createRouteHandlerClient({ cookies });

  await supabase.auth.signOut();
  console.log("Salir sesion ruta llamada");

  // Log the origin to the console
  console.log("Origin URL:", requestUrl.origin);

  return NextResponse.redirect(`${requestUrl.origin}/`, {
    // a 301 status is required to redirect from a POST to a GET route
    status: 301,
  });
}

我已经验证了原始URL,确保了正确的HTTP方法,并判断了其他常见问题,但我仍然遇到这个问题.

有没有人遇到过类似的问题,或者有没有人对可能出现的问题有什么建议?如有任何帮助,将不胜感激!谢谢!

推荐答案

您混淆了浏览器上的重定向和服务器上的重定向.

当您向API添加重定向时,

return NextResponse.redirect(`api/b`, {
  status: 301,
});

这意味着,如果try 从api/a响应fetch,它将重定向并获得来自api/b的响应(假设设置了跟随-重定向选项).

您真正想要的是浏览器端的重定向.


您可以在Next.js中使用(假设您使用的是app路由)来完成此操作:

import { redirect } from 'next/navigation'
 
export default async function Profile({ shouldRedirect }) {
  if (shouldRedirect) {
    redirect('/')
  }
 
  // ...
}

有关更多详细信息,请参阅https://nextjs.org/docs/app/api-reference/functions/redirect.

Typescript相关问答推荐

使用Angular和API请求在CRUD操作后更新客户端数据的良好实践

找不到带名称的管道''

在TypeScript中,除了映射类型之外还使用的`in`二进制运算符?

如何修复正在处理类型但与函数一起使用时不处理的类型脚本类型

Vue SFC中的多个脚本块共享导入的符号

STypescript 件的标引签名与功能签名的区别

在Typescript 中,有没有`index=unfined的速记?未定义:某个数组[索引]`?

已解决:如何使用值类型限制泛型键?

将带点的对象键重新映射为具有保留值类型的嵌套对象

如何在省略一个参数的情况下从函数类型中提取参数类型?

为什么我的导航在使用Typescript的React Native中不起作用?

是否可以通过映射类型将函数参数约束为预定义类型?

对有效枚举值的常量字符串进行常规判断

如何定义这样一个TypeScript泛型,遍历路由配置树并累积路径

无法缩小深度嵌套对象props 的范围

如何创建由一个帐户签名但使用另一个帐户支付的Hedera交易

完全在类型系统中构建的东西意味着什么?

我应该使用服务方法(依赖于可观察的)在组件中进行计算吗?

广义泛型类型不加载抽象类型上下文

const nav: typechecking = useNavigation() 和 const nav = useNavigation() 之间有什么区别?