javascript - 如何在页面加载反应之前提前预加载 i18n？

问题描述

我在提前预加载 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;

标签： javascriptreactjsinternationalization

javascript - 如何在页面加载反应之前提前预加载 i18n？

问题描述

解决方案

推荐阅读