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

您应将preload事件添加到mouseEnter事件上的链接上

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

Source

如何在页面加载反应之前预先预加载i18n？

1 个答案: