Skip to content
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.

Sign up for GitHub

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

Jump to bottom

How to use this api with next-intl navigation wrapper ? #38

Open
m-nathani opened this issue Oct 5, 2024 · 0 comments
Open

How to use this api with next-intl navigation wrapper ? #38

m-nathani opened this issue Oct 5, 2024 · 0 comments
Labels
help wanted Extra attention is needed question Further information is requested

Comments

@m-nathani
Copy link

m-nathani commented Oct 5, 2024 •
edited
Loading

I have this wrapper that performs localization for my app

navigation.ts

import { createSharedPathnamesNavigation } from 'next-intl/navigation';
import { SUPPORTED_LANGUAGES } from './constants/language';

// Always use these localized component, they provides drop-in replacements for common Next.js
// navigation APIs that automatically handle the user locale behind the scenes.
// For example instead of <Link href='locale/path' /> we just pass the path <Link href='/path' />
export const { Link, redirect, usePathname, useRouter, permanentRedirect } =
  createSharedPathnamesNavigation({
    locales: [...SUPPORTED_LANGUAGES],
  });

i want to use transition along with this to override the Link and useRouter, can you please guide on how to achieve this ?

This is my layout i am trying with both

layout.tsx

...
      <ViewTransitions>
        <LocaleProvider>
          <body className="flex h-svh flex-col scroll-smooth antialiased">
            {children}
          </body>
        </LocaleProvider>
      </ViewTransitions>
...

To use the link i am importting from navigation file above

component.tsx

'use client';

import { ComponentProps } from 'react';
import { Link } from '@/navigation';

interface Props extends ComponentProps<typeof Link> {
  href: string;
}

const LinkWithParams = ({ href, children, ...props }: Props) => {

  return (
    <Link href={{ pathname: href, ... }} {...props}>
      {children}
    </Link>
  );
};

export default LinkWithParams;
@shuding shuding added help wanted Extra attention is needed question Further information is requested labels Oct 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Extra attention is needed question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@shuding @m-nathani