3 files changed, 10 insertions, 4 deletions

diff --git a/package.json b/package.json
index e35ddc8..d043ec8 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "i18next": "^20.3.3",
+    "i18next-browser-languagedetector": "^6.1.2",
     "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
diff --git a/src/App.js b/src/App.js
index f195431..0e975fb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,9 +16,12 @@ function App() {
 
       <div>
         <label>{t('select')}</label>
-        <select onChange={(e) => i18n.changeLanguage(e.target.value)}>
+        <select
+          value={i18n.language}
+          onChange={(e) => i18n.changeLanguage(e.target.value)}
+        >
           <option value="en-US">en-US</option>
-          <option value="简体中文">简体中文</option>
+          <option value="zh-CN">简体中文</option>
           <option value="es">es</option>
           <option value="pt">Português</option>
         </select>
diff --git a/src/i18n.js b/src/i18n.js
index e0c267d..26b0cc0 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,5 +1,6 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
 const resources = {
   'en-US': {
@@ -27,7 +28,7 @@ const resources = {
       select: 'Select Language',
     },
   },
-  简体中文: {
+  'zh-CN': {
     translation: {
       title: 'WiFi 连接卡',
       'desc.use':
@@ -107,10 +108,11 @@ const resources = {
 
 i18n.use(initReactI18next).init({
   resources,
-  lng: 'en-US',
   interpolation: {
     escapeValue: false,
   },
 });
 
+i18n.use(LanguageDetector).init();
+
 export default i18n;