如何在 react-admin 中从 URL 中的路径获取和管理语言
How to get and manage language from the path in URL in react-admin
react-admin 是多语言的,但是,您可以 select 并在 redux store 中设置语言并且它在 URL 路径中不是红色的,react-admin 中有一个高级功能允许用户在本地存储中设置语言并以某种方式使其永久化,但有时您需要在 URL 中指定语言,以便用户在进入网站时不会被迫 select 一种语言,如下所示:
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>
)
}
react-admin 是多语言的,但是,您可以 select 并在 redux store 中设置语言并且它在 URL 路径中不是红色的,react-admin 中有一个高级功能允许用户在本地存储中设置语言并以某种方式使其永久化,但有时您需要在 URL 中指定语言,以便用户在进入网站时不会被迫 select 一种语言,如下所示:
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>
)
}