问题描述
react-admin 是多语言的,但是,你可以在 redux store 中选择和设置语言,它不是从 URL 路径中红色的,react-admin 中有一个高级功能,允许用户在本地存储中设置语言并制作它以某种方式永久存在,但有时您需要在 URL 中指定语言,以便用户在进入网站时不会被迫选择一种语言,如下所示:
www.testteeetweb.com/fa/posts
有什么办法可以在 react-admin 中实现吗?
解决方法
不,react-admin 中没有这样的功能。
不过,您可以在 react-admin 应用程序之外实现它。使用 history
包,并监听位置变化。解析位置,查看URL的语言部分是否不同,然后更新本地状态下的语言。在 i18nProvider 默认语言中使用该状态。
类似于:
import React,{ useState,useEffect } from 'react';
import { Admin } from 'react-admin';
import history from 'history';
import polyglotI18nProvider from 'ra-i18n-polyglot';
const MyComponent= () => {
const [language,setLanguage] = useState();
const [i18nProvider,setI18nProvider] = useState();
useEffect(() => {
// see https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#history.listen
return history.listen(({ action,location }) => {
const newLanguage = extractLanguageFromLocation(location.pathname);
if (newLanguage !== language) {
setLanguage(newLanguage)
}
})
},[]);
useEffect(() => {
setI18nProvider(polyglotI18nProvider(locale =>
locale === 'fr' ? frenchMessages : englishMessages,language
));
},[language])
return (
<Admin i18nProvider={i18nProvider}>
// ...
</Admin>
)
}