Как предварительно загрузить i18n перед загрузкой страницы?

Question

У меня проблема с предварительной загрузкой I18n заранее, так что пользователь не может видеть промежуточное состояние приложения (то есть, как на самом деле происходит изменение языка). Проблема в том, что мне нужно изменить язык страницы после некоторых запросов (выборка пользовательских данных, где упоминается, пользовательский язык). Я знаю возможные способы решения этой проблемы с ленивой загрузкой, но я впервые использую ее, поэтому было бы здорово услышать некоторые рекомендации.

Версии

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-i18next": "^11.2.7",

Это структура маршрутизации

<Switch>
        <Route exact path={SIGNUP_PAGE} component={Signup} />
        <Route exact path={LOGIN_PAGE} component={Login} />
        <Route exact path={PASSWORD_RECOVERY} component={Recovery} />
        <Route exact path={`${NEW_PASSWORD}/:uuid?`} component={NewPassword} />
        <Route exact path={`${EMAIL_VERIFICATION}/:uuid?`} component={EmailVerification} />
        <Route exact path={SIGNUP_SUCCEED} component={SignupSucceed} />
        <MainLayout>
            <ProtectedRoutes>
                <Switch>
                    {getRoutes(routes, 'component')}
                </Switch>
            </ProtectedRoutes>
        </MainLayout>
        <Route render={() => <h1>Page not Found !!!</h1>} />
</Switch>

Вот мой MainLayout компонент, внутри которого есть все маршруты

const MainLayout = (props) => {
    const {i18n} = useTranslation();
    const dispatch = useDispatch();
    const history = useHistory();
    const location = useLocation();

    const user = useSelector(state => state.user.userData, shallowEqual);
    const currentLanguage = last(user?.user_language?.split('/'))?.replace(/[A-Z]|\W+/g, '');
    const token = StorageManager.get('token');
    const lang = StorageManager.get('lang');
    // console.log(currentLanguage, lang, 'currentLanguage laaang');

    if (currentLanguage && currentLanguage !== lang) {
        StorageManager.set('lang', currentLanguage);
        i18n.changeLanguage(lang || currentLanguage);
    }

    useEffect(() => {
        if (!user.uuid && token) dispatch(getUserRequest());
    }, [dispatch, token, user.uuid]);

    if (!token && location.pathname !== LOGIN_PAGE) {
        history.push(LOGIN_PAGE);
        return null;
    }

    return (
        <div className='main-wrapper'>
            <NavBar />
            {(currentLanguage || lang) && <div >
                <Switch>
                    {getRoutes(routes, 'header')}
                </Switch>
                {props.children}
            </div>}
        </div>
    );
};

export default MainLayout;

Answer 1

Вы должны добавить событие предварительной загрузки к вашей ссылке на событие mouseEnter

i18next.loadNamespaces('anotherNamespace', (err, t) => { /* ... */ });

Источник