Persisting searchParams on swithch locale

[madaher-dev]

Description

I am building a nexts app using the app router. I followed the same setup as in https://next-intl-docs.vercel.app/examples/app-router
Everything is working fine untill i wanted to persist the searchParamas (i use the paramas to persist some state)
I modified the LocaleSwitcher in the example with the following code

"use client";
import { useLocale, useTranslations } from "next-intl";
import { usePathname, useRouter } from "next-intl/client";
import { useTransition } from "react";
import { useSearchParams } from "next/navigation";

export default function LocaleSwitcher() {
  const t = useTranslations("LocaleSwitcher");
  const [isPending, startTransition] = useTransition();
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();

  // Get the current query parameters
  const searchParams = useSearchParams();

  const allParams = searchParams.toString();

  function onSelectChange(event) {
    const nextLocale = event.target.value;

    let newPathname = pathname + "?" + allParams;

    startTransition(() => {
      router.replace(newPathname, { locale: nextLocale });
    });
  }

  const locales = ["en", "ar" /* other languages */];
  return (
    <label>
      <p className="sr-only">{t("label")}</p>
      <select
        className="inline-flex appearance-none bg-transparent py-3 pl-2 pr-6"
        defaultValue={locale}
        disabled={isPending}
        onChange={onSelectChange}
      >
        {locales.map((cur) => (
          <option key={cur} value={cur}>
            {t(cur)}
          </option>
        ))}
      </select>
      <span className="pointer-events-none absolute right-2 top-[8px]">⌄</span>
    </label>
  );
}

Now if i am on this page http://localhost:30002/?location=test&city=Beirut&currency=USD and switch to Arabic i am routed normally to http://localhost:30002/ar?location=test&city=Beirut&currency=USD
But if i want to switch back to english i am routed to http://localhost:30002/en?location=test&city=Beirut&currency=USD
and the page give
This page isn’t working localhost redirected you too many times
I tried removing the page.jsx outside the locale router that has a redirect but i get same results
Also please note that http://localhost:30002/?location=test&city=Beirut&currency=USD works fine

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://github.com/advanced-digital-technologies/lokalee-new-web/tree/staging

Reproduction description

Steps to reproduce:

1. Open reproduction npm run dev
2. Add some searchParams to the url ex: location=test&foo=bar
3. Switch to arabic
4. Switch back to english

Expected behaviour

http://localhost:30002/en?location=test&city=Beirut&currency=USD should redirect to http://localhost:30002/?location=test&city=Beirut&currency=USD

[amannn]

Thank you for the bug report! I've just fixed this in [email protected] (see the 3.0 RC announcement)

[madaher-dev]

Thank you for an amazing library <3

[lmac-1]

Thanks @madaher-dev, this comment just helped me solve how to correctly handle query params in my LocaleSwitcher component. I'm just wondering if this should be added to some of the examples.

@amannn would you like me to make a PR to update the example here or somewhere else in the repo? More than happy to do so 🤗

[amannn]

Sounds like a good idea, thanks!

Would you mind updating the corresponding expandable section in the useRouter docs as well?

[Mimachh]

Hello, your job is really amazing.
However I'm facing an issue. I actually have nested route params "/store/[storeId]/products/[id]", and the locale switcher does not work as excepted. I tried this
router.replace( {pathname, params}, {locale: nextLocale} );

But it does not redirect me well. Have you got solution ?