所选语言仅应用于当前组件，但在切换到其他组件时返回默认值

Question

我正在尝试在我的web应用程序中实现国际化。我将i18next与React一起使用，每个组件本身的翻译都很好。语言通过侧边栏中的下拉菜单进行更改，在每个组件中都可见。(我也在使用react bootstrap和redux(

问题：当移动到其他组件时，语言会返回到默认/浏览器语言。

例如：我在主菜单中，将语言从英语更改为德语->文本被翻译成英语。通过单击按钮更改为其他组件时，新组件的语言将恢复为英语。在新组件中，我可以再次单击下拉菜单将语言更改为德语，但用户总是手动更改语言，这当然很烦人。

如何在整个组件中保持用户选择的语言？我需要回退到redux并将语言存储在商店中吗？

App.tsx

function App() {
const isAuthenticated = useSelector( (state: RootStateOrAny)  => state.user.isAuthenticated)

return (
<Suspense fallback={<Loader />}>
<Router>
<div className="App">
<Sidebar isAuthenticated={isAuthenticated}/>
<Switch>
<PublicRoute exact path="/login" component={Login} isAuthenticated={isAuthenticated}/>
<PrivateRoute exact path="/" component={Home} isAuthenticated={isAuthenticated}/>
<PrivateRoute exact path="/storage" component={Storage} isAuthenticated={isAuthenticated}/>
<PrivateRoute exact path="/bom" component={BOM} isAuthenticated={isAuthenticated}/>
<PrivateRoute exact path="/products" component={ProductList} isAuthenticated={isAuthenticated}/>
<PrivateRoute exact path="/shipping" component={ShippingOrders} isAuthenticated={isAuthenticated}/>
</Switch>
</div>
</Router>
</Suspense>
);
}
export default App;

边栏组件

function Sidebar (isAuthenticated : any) {
const dispatch: Dispatch<any> = useDispatch()
const { t, i18n } = useTranslation();
let dispatchLogout = () => {
console.log("logout")
dispatch(logoutUser())
}
return (
<>
<Navbar bg="dark" expand="lg" variant="dark" sticky="top">
<Container>
<Row>
<Col xl lg md sm xs = {3}>
<Dropdown>
<DropdownToggle className="menu-dropdown-toggle" size="lg" variant="primary" id="dropdown-basic">
{t("menu")}
</DropdownToggle>
<DropdownMenu className="menu-dropdown" style={{backgroundColor:'#ADD8E6'}}>
<DropdownItem className="menu-dropdown-item" href="/storage">{t("storage")}</DropdownItem>
<DropdownItem className="menu-dropdown-item" href="/products">{t("productList")}</DropdownItem>
<DropdownItem className="menu-dropdown-item" href="/bom">{t("bom")}</DropdownItem>
<DropdownItem className="menu-dropdown-item" href="/shipping">{t("shippingOrders")}</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
<Col xl lg md sm xs = {3}>
<Button className="home-button" size="lg" variant="primary" href="/">{t("home")}</Button>
</Col>
<Col  >
<Navbar.Brand className="brand" href="url">
<img className="brandLogo" alt="company-logo" src={Logo}/>
</Navbar.Brand>
</Col>            
</Row>
</Container>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav"></Navbar.Collapse>
<Nav className="mr-sm-2">
<LanguageSwitcher/>
{isAuthenticated? 
<Button size="lg" id="log" variant="primary" href="/login" onClick={dispatchLogout}>{t("logout")}</Button> 
: 
<Button size="lg" id="log" variant="primary" href="/login">{t("login")}</Button>
}

</Nav>
</Navbar>
</>
)
}

const mapStateToProps = (state: any) => ({
user: state.user,
UI: state.UI,
});

//this maps actions to our props in this functional component
const mapActionsToProps = {
logoutUser
};
export default connect(mapStateToProps, mapActionsToProps)(Sidebar)

侧边栏中的语言切换器组件

export default function LanguageSwitcher() {
const { i18n } = useTranslation();
const changeLanguage = (lng: string) => {
i18n.changeLanguage(lng);
};
return (
<Dropdown className="language-dropdown-container">
<DropdownToggle className="language-dropdown" title="languages" id="_language-dropdown" variant="primary" >
{<img className="language-icon" alt="language-icon" src={LanguageIcon}/>}
</DropdownToggle>
<DropdownMenu style={{backgroundColor:'#ADD8E6'}}>
<Dropdown.Item onSelect={() => changeLanguage("jp")}>jp</Dropdown.Item>
<Dropdown.Item onSelect={() => changeLanguage("de")}>de</Dropdown.Item>
<Dropdown.Item onSelect={() => changeLanguage("en")}>en</Dropdown.Item>
</DropdownMenu>
</Dropdown>
);
}

i18下一次配置

import translationEn from './en/translation.json';
import translationDe from './de/translation.json';
import translationJp from './jp/translation.json';
export const resources = {
en: {
...translationEn,
},
de: {
...translationDe,
},
jp: {
...translationJp
}
} as const;
i18n
.use(initReactI18next)
.use(LanguageDetector)
.init({
debug: true,
lng: 'en',
supportedLngs: ['en', 'jp', 'de'],
fallbackLng: 'en',
resources,
keySeparator: '.',
interpolation: {
escapeValue: false
},
react: {
wait:true,
}
},
);
export default i18n;

使用翻译的样本组件

import React from "react";
import { useTranslation } from "react-i18next";
export default function Home () {
const { t, i18n } = useTranslation();
return (
<div>{t("homeScreen.description")}</div>
)
}

Answer 1

好的，找到问题了。出于测试目的，当我仍然没有一个按钮来更改UI中的语言时，我在配置文件中写了以下内容：lng:'en'

因此，当切换到不同的组件时，语言总是返回到英语。

=>不要在配置文件中设置lng