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

Question

react-admin is multilingual, however, you can select and set language in redux store and it is not red from the URL path, there is a premium feature in react-admin that allow user to set language in local storage and make it somehow permanent but sometimes you need to specify language in the URL so that the user is not forced to select a language when they enters the website like below:

www.testteeetweb.com/fa/posts 

Is there any way to achieve it in react-admin?

Answer 1

No, there is no such feature in react-admin.

You can achieve it outside of your react-admin app, though. Use the history package, and listen to location changes. Parse the location to see if the language part of the URL is different, then update the language in a local state. Use that state in the i18nProvider default Language.

Something like:

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