Closed ArtemPedenko closed 10 months ago
Hello!
Indeed, there is a "preserveSearchParams" option to pass to useChangeLocale
.
(Maybe this is not documented yet, Next International has undergone some changes recently.)
Probs something like: useChangeLocale({preserveSearchParams: true})
I get this query params from server page. useSearchParams used in client components only
My page look like this `const ProductPage = async ({ searchParams, params }) => { const t = await getI18n(); console.log(searchParams); //some code };
export default ProductPage;`
I cahenge language in client component and use this:
import { useChangeLocale } from "@/locales/client"; const changeLocale = useChangeLocale();
<LanguageButton onClick={() => changeLocale("en")}> ENGLISH </LanguageButton>
I think i need thing like useSearchParams with suspense, but for server component. but I didn’t find whether there is such a thing or not. That's why now i put this params in url and its look like "page1/id/namespace"
I cahenge language in client component and use this:
import { useChangeLocale } from "@/locales/client"; const changeLocale = useChangeLocale();
The issue is that you're not using the preserveSearchParams
option inside useChangeLocale()
:
const changelocale = useChangeLocale({ preserveSearchParams: true })
You'll also need to wrap the component using this hook in a Suspense
boundary. See the documentation here: https://next-international.vercel.app/docs/app-get-change-locale#preserving-search-params
I make like you say
const changeLocale = useChangeLocale({ preserveSearchParams: true });
and to my Layout
`"use client";
import { ReactElement, Suspense } from "react";
import { I18nProviderClient } from "../../locales/client";
import Header from "./modules/Header";
import HeaderSticky from "./modules/HeaderSticky";
import Footer from "./modules/Footer";
import { Providers } from "../store/provider";
export default function SubLayout({
children,
params,
}: {
children: ReactElement;
params: { locale: string };
}) {
return (
<Providers>
<I18nProviderClient locale={params.locale}>
<Suspense>
<Header />
<HeaderSticky />
{children}
<Footer />
</Suspense>
</I18nProviderClient>
</Providers>
);
}`
And its still not work
Please send a minimal reproduction, so we can debug further. It works as expected in https://github.com/QuiiBz/next-international/tree/main/examples/next-app
i copy my repo on stackblitz (https://stackblitz.com/edit/github-83o5jz?file=app%2F[locale]%2Flayout.tsx)
Here link to page with params.
Suspense in app/[locale]/layout.tsx useChangeLocale in app/[locale]/modules/Header/LanguageModal.tsx Page when i need query params in app/[locale]/[...product]/page.tsx
you can change locale in this modal
query params in my url disappear when i change locale like:
before: localhost:3000/en/ea-sports-fc-24?id=05ae92c0bda14ba788114e87ca5af446&namespace=4750c68b2bfa4f43933b81cfd5cc510c
after: http://localhost:3000/ea-sports-fc-24
my link look like this:
<Link href={{ pathname:
${productLink}, query: { id:
${item.offer.id}, namespace:
${item.offer.namespace}`, }, }}