docs: Update LocaleSwitcherSelect in example-app-router to match docs (#853 by @CodyDuff)

Updates LocaleSwitcherSelect.tsx in examples/example-app-router to match
the doc changes in commit
[de285f6](de285f6),
which fixed #581.

---------

Co-authored-by: Jan Amann <jan@amann.me>

Author: CodyDuff

docs/pages/docs/environments/server-client-components.mdx

@@ -171,6 +171,43 @@ By doing this, we can use interactive features from React like `useState` on tra
 
 Learn more in the Next.js docs: [Passing Server Components to Client Components as Props](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props)
 
+<details>
+<summary>Example: How can I implement a locale switcher?</summary>
+
+If you implement a locale switcher as an interactive select, you can keep internationalization on the server side by rendering the labels from a Server Component and only marking the `select` element as a Client Component.
+
+```tsx filename="LocaleSwitcher.tsx"
+import {useLocale, useTranslations} from 'next-intl';
+import {locales} from 'config';
+
+// A Client Component that registers an event listener for
+// the `change` event of the select, uses `useRouter`
+// to change the locale and uses `useTransition` to display
+// a loading state during the transition.
+import LocaleSwitcherSelect from './LocaleSwitcherSelect';
+
+export default function LocaleSwitcher() {
+  const t = useTranslations('LocaleSwitcher');
+  const locale = useLocale();
+
+  return (
+    <LocaleSwitcherSelect defaultValue={locale} label={t('label')}>
+      {locales.map((cur) => (
+        <option key={cur} value={cur}>
+          {t('locale', {locale: cur})}
+        </option>
+      ))}
+    </LocaleSwitcherSelect>
+  );
+}
+```
+
+[Example implementation](https://github.com/amannn/next-intl/blob/main/examples/example-app-router/src/components/LocaleSwitcher.tsx) ([demo](https://next-intl-example-app-router.vercel.app/en))
+
+See also: [`useRouter`](/docs/routing/navigation#userouter)
+
+</details>
+
 <details>
 <summary>Example: How can I implement a form?</summary>
 
@@ -217,41 +254,6 @@ export default function RegisterPage() {
 
 </details>
 
-<details>
-<summary>Example: How can I implement a locale switcher?</summary>
-
-If you implement a locale switcher as an interactive select, you can keep internationalization on the server side by rendering the labels from a Server Component and only marking the select element as a Client Component.
-
-```tsx filename="LocaleSwitcher.tsx"
-import {useLocale, useTranslations} from 'next-intl';
-import {locales} from 'config';
-
-// A Client Component that registers an event listener for
-// the `change` event of the select, uses `useRouter`
-// to change the locale and uses `useTransition` to display
-// a loading state during the transition.
-import LocaleSwitcherSelect from './LocaleSwitcherSelect';
-
-export default function LocaleSwitcher() {
-  const t = useTranslations('LocaleSwitcher');
-  const locale = useLocale();
-
-  return (
-    <LocaleSwitcherSelect defaultValue={locale} label={t('label')}>
-      {locales.map((cur) => (
-        <option key={cur} value={cur}>
-          {t('locale', {locale: cur})}
-        </option>
-      ))}
-    </LocaleSwitcherSelect>
-  );
-}
-```
-
-[Example implementation](https://github.com/amannn/next-intl/blob/main/examples/example-app-router/src/components/LocaleSwitcher.tsx) ([demo](https://next-intl-example-app-router.vercel.app/en))
-
-</details>
-
 ### Option 2: Moving state to the server side
 
 You might run into cases where you have dynamic state, such as pagination, that should be reflected in translated messages.

docs/pages/docs/routing/navigation.mdx

@@ -410,21 +410,18 @@ Note that if you have dynamic params on some routes, you should pass those as we
 ```tsx
 'use client';
 
-import {useParams} from 'next/navigation';
 import {usePathname, useRouter} from '../navigation';
+import {useParams} from 'next/navigation';
 
 const pathname = usePathname();
 const router = useRouter();
 const params = useParams();
 
 router.replace(
-  {
-    pathname,
-    // TypeScript validates that only known `params` are used in combination
-    // with a given `pathname`. Since the two will always match for the current
-    // route, we can skip runtime checks.
-    params: params as any
-  },
+  // @ts-expect-error -- TypeScript will validate that only known `params`
+  // are used in combination with a given `pathname`. Since the two will
+  // always match for the current route, we can skip runtime checks.
+  {pathname, params},
   {locale: 'de'}
 );
 ```

examples/example-app-router/src/components/LocaleSwitcherSelect.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import {useParams} from 'next/navigation';
 import {ChangeEvent, ReactNode, useTransition} from 'react';
 import {useRouter, usePathname} from '../navigation';
 
@@ -18,11 +19,18 @@ export default function LocaleSwitcherSelect({
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const pathname = usePathname();
+  const params = useParams();
 
   function onSelectChange(event: ChangeEvent<HTMLSelectElement>) {
     const nextLocale = event.target.value;
     startTransition(() => {
-      router.replace(pathname, {locale: nextLocale});
+      router.replace(
+        // @ts-expect-error -- TypeScript will validate that only known `params`
+        // are used in combination with a given `pathname`. Since the two will
+        // always match for the current route, we can skip runtime checks.
+        {pathname, params},
+        {locale: nextLocale}
+      );
     });
   }