fix: match browser default language error (#291)

close #290

src/theme/Layout/BrowserLanguage.tsx

@@ -1,57 +1,42 @@
-import React, {useEffect} from 'react';
+import { useEffect } from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 const LANGUAGE_PREFERENCE_KEY = '_lang_browser_';
 
 export default function BrowserLanguageRedirect() {
   const {
     siteConfig: {
-      i18n: {defaultLocale, locales},
+      i18n: { defaultLocale },
     },
   } = useDocusaurusContext();
 
   useEffect(() => {
-    window.addEventListener('languagechange', () => {
-      localStorage.setItem(LANGUAGE_PREFERENCE_KEY, navigator.language);
-    })
-
     const currentPath = window.location.pathname;
     const storageLocale = localStorage.getItem('_lang_user_') || localStorage.getItem(LANGUAGE_PREFERENCE_KEY);
-    const storageLocaleIsDefault = storageLocale === defaultLocale;
-
-    if (storageLocale) {
-      if (storageLocaleIsDefault) {
-        if (currentPath === '/') return;
-        return;
-      } else {
-        if (currentPath.startsWith(`/${storageLocale}`)) {
-          return;
-        } else {
-          window.location.pathname = `/${storageLocale}${currentPath}`;
-          return;
-        }
+
+    const isZhCN = navigator.language.toLowerCase() === 'zh-cn';
+    const isStoredZhCN = storageLocale === 'zh-CN';
+
+    if ((isZhCN || isStoredZhCN) && !currentPath.startsWith('/zh-CN')) {
+      if (isZhCN) {
+        localStorage.setItem(LANGUAGE_PREFERENCE_KEY, 'zh-CN');
       }
-    } else {
-      const browserLanguage = navigator.language.toLowerCase();
-      const matchedLocale = locales.find(locale =>
-        browserLanguage === locale.toLowerCase() ||
-        browserLanguage.startsWith(locale.toLowerCase() + '-')
-      );
-      if (matchedLocale) {
-        localStorage.setItem(LANGUAGE_PREFERENCE_KEY, matchedLocale);
-        window.location.pathname = `/${matchedLocale}${currentPath}`;
-      } else {
-        window.location.pathname = currentPath;
+      if (isStoredZhCN || storageLocale === null) {
+        window.location.pathname = `/zh-CN${currentPath}`;
       }
     }
 
-    // remove the event listener
+    const handleLanguageChange = () => {
+      if (navigator.language.toLowerCase() === 'zh-cn') {
+        localStorage.setItem(LANGUAGE_PREFERENCE_KEY, 'zh-CN');
+      }
+    };
+    window.addEventListener('languagechange', handleLanguageChange);
+
     return () => {
-      window.removeEventListener('languagechange', () => {
-        localStorage.setItem(LANGUAGE_PREFERENCE_KEY, navigator.language);
-      })
-    }
-  }, []);
+      window.removeEventListener('languagechange', handleLanguageChange);
+    };
+  }, [defaultLocale]);
 
   return null;
 }

src/theme/Layout/index.tsx

@@ -23,7 +23,7 @@ import LayoutProvider from '@theme/Layout/Provider';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import type {Props} from '@theme/Layout';
 import mixpanel from 'mixpanel-browser';
-// import BrowserLanguage from './BrowserLanguage';
+import BrowserLanguage from './BrowserLanguage';
 
 import styles from './styles.module.css';
 
@@ -58,7 +58,7 @@ export default function Layout(props: Props): JSX.Element {
       <AnnouncementBar />
 
       <Navbar />
-      {/* <BrowserLanguage /> */}
+      <BrowserLanguage />
 
       <div
         id={SkipToContentFallbackId}