react-admin 如何从 URL 中的路径获取和管理语言

如何解决react-admin 如何从 URL 中的路径获取和管理语言

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>
    )
}