Next-intl Issue: <Link> href not accept string except "/" and "/pathnames"

29 views Asked by At

Actually, I'm not sure is this a bug or mine project issue.

I use Link from next-intl, and component do not accept strings except '/' and 'pathnames'

The interface from error hint is:

(property) href: "/" | "/pathnames" | ({
    pathname: "/";
} & Omit<UrlObject, "pathname">) | ({
    pathname: "/pathnames";
} & Omit<UrlObject, "pathname">)

I have no idea why it accept only these two string. While I change to Next.js's component, it works without error.

// page.tsx
'use client';

import { Link, usePathname } from '@/i18nnavigation';

export default function Nav({ links }: NavProps) {
    const pathname = usePathname();
    const isCurrentPath = (path: string | undefined) => (pathname === path ? 'default' : 'ghost');

    return (
        <Link
            href={{
                pathname: '/users',
                params: { userId: '5' },
            }}
            className="flex">
            <link.icon size={24} />
            <span className="ml-2">{link.title}</span>
        </Link>
    );
}
// i18nnavigation.ts
import { createLocalizedPathnamesNavigation } from 'next-intl/navigation';
import { locales, pathnames, localePrefix } from './i18nconfig';

export const { Link, redirect, usePathname, useRouter } = createLocalizedPathnamesNavigation({
    locales,
    pathnames,
    localePrefix,
});

Expect no error or type hint and correctly pass '/user' as prop to href in

0

There are 0 answers