Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot retrieve Link's props from createLocalizedPathnamesNavigation #1250

Closed
3 tasks done
JulienRst opened this issue Aug 13, 2024 · 1 comment
Closed
3 tasks done
Labels
bug Something isn't working unconfirmed Needs triage.

Comments

@JulienRst
Copy link

JulienRst commented Aug 13, 2024

Description

Hello everyone,

I need a <Link /> component with special things (like analytics 👻 ), so I figured that I should create another link let's say <LinkWithAnalytics /> that would forward ref to <Link />.

Let's keep it simple :

const { Link, redirect, usePathname, useRouter } =
  createLocalizedPathnamesNavigation({
    locales: ['en', 'fr'],
    localePrefix: 'as-needed',
    pathnames,
  });

const AnalyticLinks = React.forwardRef<
  React.ElementRef<typeof Link>, 
  React.ComponentPropsWithoutRef<typeof Link>
>(props, ref) => {
    return <Link ref={ref} ...props  /> // <-- error here
} 

Property 'href' is missing in type '{ ref: ForwardedRef; }'

So I just tried to check what is inside typeof Link and it's a bit hard to read but eventually result in {}.

It mostly related to HOW this is typed, because when used directly the Link have the correct props AND typed href from pathnames.

And we're not safe from an error on my part 🤭

If I can be of any form of help do not hesitate to reach out!

Kind regards 😄

Verifications

  • I've verified that the problem I'm experiencing isn't covered in the docs.
  • I've searched for similar, existing issues on GitHub and Stack Overflow.
  • I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/JulienRst/next-intl-bug-repro-app-router

Reproduction description

  1. Open editor
  2. Check navigation.ts and acknowledge the uses of createLocalizedPathnamesNavigation
  3. Check analytics-link.tsx and acknowledge the error

Expected behaviour

As I was working with createSharedPathnamesNavigation before, I would expect that typeof Link give us the same props (with the href typed from pathnames) than the typeof Link from createSharedPathnamesNavigation.

@JulienRst JulienRst added bug Something isn't working unconfirmed Needs triage. labels Aug 13, 2024
@amannn
Copy link
Owner

amannn commented Aug 16, 2024

Please see How can I compose the link with its href prop? in the docs for Link (make sure you have "Localized pathnames" selected).

Going to move this to a discussion since it's a usage question and not a bug report.

Repository owner locked and limited conversation to collaborators Aug 16, 2024
@amannn amannn converted this issue into discussion #1265 Aug 16, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
bug Something isn't working unconfirmed Needs triage.
Projects
None yet
Development

No branches or pull requests

2 participants