Intento hacer un gancho a partir de mi código, pero tengo el problema. Mi código del archivo de enlace:
import { useRouter } from "next/router"; const useCurrentPath = () => { const { asPath, locale, defaultLocale } = useRouter(); if (locale === defaultLocale) return { asPath }; return `/${locale}${asPath}`; }; export default useCurrentPath;Lugar donde lo llamo
import { SubHeaderLink, SubHeaderLinks } from "@/components/layout/subHeader/SubHeader"; import { ReactStoryblokComponent, StoryblokLink } from "@/types/storyblok"; import { useStoryblokLinkParser } from "storyblok/useStoryblokLinkParser"; import useCurrentPath from "hooks/useCurrentPath"; type Blok = { subHeaderLinks: { _uid: string; linkName: string; href: StoryblokLink }[]; }; const StoryblokSubHeader: ReactStoryblokComponent<Blok> = ({ blok: { subHeaderLinks }, }) => { const { getHref } = useStoryblokLinkParser(); const getCurrentPath = useCurrentPath(); return ( <SubHeaderLinks> {subHeaderLinks.map(({ _uid, href, linkName }) => ( <SubHeaderLink key={_uid} href={getHref(href)} name={linkName} isActive={ getCurrentPath() === getHref(href)} /> ))} )) </SubHeaderLinks> ); }; export default StoryblokSubHeader;en la fila
isActive={ getCurrentPath() === getHref(href)}Recibí el problema "Esta expresión no se puede llamar. No se puede llamar a ningún componente del tipo 'string | { asPath: string; }'".
const { asPath, locale, defaultLocale } = useRouter(); if (locale === defaultLocale) return { asPath }; Está desestructurando asPath desde useRouter(); en la primera línea, pero luego lo devuelves dentro de un objeto en la segunda.
probar:
const { asPath, locale, defaultLocale } = useRouter(); if (locale === defaultLocale) return asPath;Su función debería devolver una cadena independientemente de entonces.
La siguiente línea:
const getCurrentPath = useCurrentPath(); asigna el resultado de llamar a useCurrentPath a la constante getCurrentPath . Ese resultado, basado en tu enlace, es una string o un objeto de tipo { asPath: string } .
Ese resultado no es una función y, por lo tanto, no se puede llamar. Y lo está llamando dentro de JSX, en el atributo isActive de <SubHeaderLink /> ).
Probablemente quisiste decir:
const getCurrentPath = useCurrentPath , porque se puede llamar a useCurrentPath . O alternativamente:
const getCurrentPath = () => useCurrentPath() Otro problema es el hecho mismo de que no siempre devuelve una string de su gancho personalizado.
Creo que deberías reemplazar return { asPath } con return asPath , dentro de tu enlace, para que el enlace siempre devuelva una string , que es, muy probablemente, lo que quieres.
El problema es que está devolviendo una cadena/objeto de su enlace y luego intenta invocarlo como una función.
Cambios menores, sugeriría:
import { useRouter } from "next/router"; const useCurrentPath = () => { const { asPath, locale, defaultLocale } = useRouter(); if (locale === defaultLocale) return asPath; return `/${locale}${asPath}`; }; export default useCurrentPath; <SubHeaderLink key={_uid} href={getHref(href)} name={linkName} isActive={ getCurrentPath === getHref(href)} />