don't let the href depend on the router hash in client-side rendering (…

…github#24106)
Kokyawminthu · Jan 6, 2022 · 5893ae3 · 5893ae3
1 parent 0da2942
commit 5893ae3
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/components/page-header/LanguagePicker.tsx b/components/page-header/LanguagePicker.tsx
@@ -14,6 +14,12 @@ export const LanguagePicker = ({ variant }: Props) => {
   const langs = Object.values(languages)
   const selectedLang = languages[locale]
 
+  // The `router.asPath` will always be without a hash in SSR
+  // So to avoid a hydraration failure on the client, we have to
+  // normalize it to be without the hash. That way the path is treated
+  // in a "denormalized" way.
+  const routerPath = router.asPath.split('#')[0]
+
   return (
     <Picker
       variant={variant}
@@ -25,7 +31,7 @@ export const LanguagePicker = ({ variant }: Props) => {
           text: lang.nativeName || lang.name,
           selected: lang === selectedLang,
           item: (
-            <Link href={router.asPath} locale={lang.code}>
+            <Link href={routerPath} locale={lang.code}>
               {lang.nativeName ? (
                 <>
                   <span lang={lang.code}>{lang.nativeName}</span> (