From b69c464493a695facd880897eee9e285d213b25b Mon Sep 17 00:00:00 2001
From: Adriano Raiano <adriano@raiano.ch>
Date: Fri, 2 Sep 2022 13:11:18 +0200
Subject: [PATCH] example to show alternative language change without using
 Link component

---
 examples/simple/pages/index.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/examples/simple/pages/index.js b/examples/simple/pages/index.js
index 5fa758a9..14618193 100644
--- a/examples/simple/pages/index.js
+++ b/examples/simple/pages/index.js
@@ -12,6 +12,14 @@ const Homepage = () => {
   const router = useRouter()
   const { t } = useTranslation('common')
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const onToggleLanguageClick = (newLocale) => {
+    const { pathname, asPath, query } = router
+    router.push({ pathname, query }, asPath, { locale: newLocale })
+  }
+
+  const changeTo = router.locale === 'en' ? 'de' : 'en'
+
   return (
     <>
       <main>
@@ -44,12 +52,17 @@ const Homepage = () => {
         <div>
           <Link
             href='/'
-            locale={router.locale === 'en' ? 'de' : 'en'}
+            locale={changeTo}
           >
             <button>
-              {t('change-locale', { changeTo: router.locale === 'en' ? 'de' : 'en' })}
+              {t('change-locale', { changeTo })}
             </button>
           </Link>
+          {/* alternative language change without using Link component
+          <button onClick={() => onToggleLanguageClick(changeTo)}>
+            {t('change-locale', { changeTo })}
+          </button>
+          */}
           <Link href='/second-page'>
             <button
               type='button'