最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

next.js - Error acessing route with next-intl after link click - Stack Overflow

programmeradmin0浏览0评论

I have a next.js aplication that works perfectly without any error, but after I add the next-intl to handle the i18n when I click a link that redirects me to another page, it returns an error.

error:

    Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  <... as={{$$typeof: ..., render: ...}} href=... variant=... color=... startContent=... radius=... className=... children=...>
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {$$typeof: ..., render: function y}
                          ^^^^^^^^^^
    at stringify (<anonymous>) {
  digest: '302182442'
}
 GET /pt/busca?segmento=1 500 in 439ms

code of the component with the link:

 "use client";

import { Button } from "@nextui-/react";
import { Link } from "@/i18n/routing";

// Define o tipo Segmento
interface Segmento {
  id_segmento: number;
  segmento_descricao: string;
}

interface SegmentoProps {
  segmentos: Segmento[];
}

export default function BuscaSegmento({ segmentos }: SegmentoProps) {
  return (
    <div className="mx-2 my-3 rounded-md bg-primary text-primary-foreground">
      <h1 className="py-3 text-center">SEGMENTOS</h1>
      <div className="grid grid-cols-2 gap-3 py-2 md:flex md:flex-col">
        {segmentos.map((segmento) => (
          <Button
            key={segmento.id_segmento}
            as={Link}
            href={`/busca?segmento=${segmento.id_segmento}`}
            radius="sm"
            size="md"
            variant="faded"
            color="primary"
            className="mx-5 my-2"
          >
            {`Linha ${segmento.segmento_descricao}`}
          </Button>
        ))}
      </div>
    </div>
  );
}

I already tried to wrap the link with the button, tried to create a separated component for it, but none of this work

I'm begining to work with i18n handling and I need a little help to fix this issue

发布评论

评论列表(0)

  1. 暂无评论