title: Next.js / i18next: Language Selector for url with #hash
body: <p>I am using the following Languageselector in my next project:</p>
  <pre><code>import React, { useState } from 'react'
  import i18n from '../src/services/i18n'
  import Link from 'next/link'
  import { useRouter } from 'next/router'
  
  
  const LanguageSelector = (props) =&gt; {
    const [language, setLanguage] = useState(i18n.language);
    const router = useRouter()
  
    const handleOnclick = (value) =&gt; {
      router.push(router.asPath, router.asPath, { locale: value });
    };
  
    console.log(router);
  
    return (  
      &lt;&gt;
      &lt;div className={props.className!==undefined&amp;&amp;props.className!==&quot;&quot;? ('d-inline-block d-xl-none '+props.className):&quot;d-inline-block d-xl-none &quot;} &gt;
          &lt;select onChange={(e)=&gt;{handleOnclick(e.target.value)}} required defaultValue={router.locale}&gt;
             &lt;option value='de'&gt;Deutsch&lt;/option&gt;
             &lt;option value='en'&gt;Enligsh&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      
      &lt;div className=&quot;d-none d-xl-block&quot;&gt;
        {router.locale===&quot;en&quot;? &lt;div&gt;&lt;Link href={router.asPath} locale='de'&gt;DE&lt;/Link&gt;&lt;/div&gt; : &lt;div&gt;DE&lt;/div&gt;}
        &lt;p&gt;|&lt;/p&gt;
        {router.locale===&quot;de&quot;? &lt;div&gt;&lt;Link href={router.asPath} locale='en'&gt;EN&lt;/Link&gt;&lt;/div&gt; : &lt;div&gt;EN&lt;/div&gt;}
      &lt;/div&gt;
      &lt;/&gt;
    )
      
  }
  
  export default LanguageSelector
  
  _app.js
  </code></pre>
  <p>This does work fine until the visitor is on an URL, that has a # parameter. The URL in browser bar still changes but the language stays the same. How can I change the language on URLs with hash?</p>
  <p>EDIT: This is how I am using translation</p>
  <pre><code>import Layout from '../components/Layout'
  import { appWithTranslation } from 'next-i18next';
  import React, {useState, useEffect} from 'react';
  import { useRouter } from 'next/router'
  
  const app = ({Component, pageProps })=&gt; {
    const router = useRouter()
  
    function updateSchnellzugriffe(value, mobileValue){
      setSchnellzugriffe(value);
      setMobileSchnellzugriffe(mobileValue);
    }
  
    return (
      &lt;Layout&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/Layout&gt;
    )
  }
  export default appWithTranslation(app)
  
  </code></pre>
  <p>And this is an example of pageComponent</p>
  <pre><code>import React, {useEffect, useState} from 'react'
  import { useTranslation } from 'next-i18next';
  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  
  const home = (props) =&gt; {
      const { t } = useTranslation(['common','home']);
  
      return (
                  &lt;h1 &gt;{t(&quot;home:headline&quot;)}&lt;/h1&gt;
          )
  };
  
  
  
  export async function getStaticProps({ locale }){
      return {
          props: {
        ...await serverSideTranslations(locale, ['common','home']),
          },
      }
  }
  export default home
  
  </code></pre>