Pass a `locale` to navigation APIs from `useRouter`

[pschaub]

Currently, it is possible to change the current locale by providing a Link with a different locale.
This can be combined with usePathname to show a link in a different locale. See #278

For my project, I want to use a custom select component to change the locale. I cannot use the Link component in this situation. Instead, I want to change the locale through a function. So I tried to use useRouter but it does not have any option to pass the new locale to it.

It would be great to have a simple function to get the current url with a specific locale to simplify the development of a component to change the locale.

The documentation should contain some kind of solution because this question has been asked multiple times, mostly by people who do not understand that the single source of truth does rely on the current URL. See: #320, #407

[pschaub]

I tried this and it works on my project in a client component:

import {usePathname} from "next-intl/client";
import {useRouter} from "next/navigation"; // use `next/navigation`, not `next-intl/client`

const pathname = usePathname();
const router = useRouter();

// Use this in a function to switch to the same page with a different locale
router.push(`/${locale}/${pathname}`);

Is this the best solution? Does it work in all situations?
Is the / between locale and pathname an issue? (could pathname already contain a /?)

I think this should be added to the documentation.

[amannn]

Thank you for the question @pschaub! This was indeed asked a few times before. In #409 I've added support in the wrapped functions from useRouter to override the locale. This can also be used for switching the locale for the same page.

Please see the updated docs: https://next-intl-docs.vercel.app/docs/routing/navigation

Hope this helps! Let me know in case you find something in the docs that needs clarification!