我有一个用react hook写的项目,我想改变语言,我使用i18n,但是当我使用useTranslation改变语言时,它的加载时间很长,我不知道如何解决。我使用i18n,但当我使用translation改变语言时,它的加载时间很长,我不知道如何解决这个问题。Pls help me with this and sorry for my bad english.
文件路由。
const Routes = () => {
return (
<Suspense fallback={<BrandLoading />}>
<Switch>
<RouteWithLayout
component={DashboardView}
exact
layout={MainLayout}
path={`/${routeUrls.dashboard.path}`}
/>
</Switch>
</Suspense>
);
};
export default Routes;
文件App.js
import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { ThemeProvider } from '@material-ui/styles';
import theme from 'theme';
import Routes from 'routes';
import './i18n'
const browserHistory = createBrowserHistory();
const App = () => {
return (
<ThemeProvider theme={theme}>
<Router history={browserHistory}>
<Routes/>
</Router>
</ThemeProvider>
);
};
export default App;
文件i18n.js。
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n.use(LanguageDetector)
.use(initReactI18next)
.init({
defaultNS: 'translation',
fallbackLng: 'vn',
debug: true,
interpolation: {
escapeValue: false,
},
load: 'languageOnly',
saveMissing: true,
});
export default i18n;
文件dashboard.js。
const Dashboard = ({ className = '' }) => {
const { t, i18n } = useTranslation();
return (
<div>
<Typography>{t.hello}</Typography>
</div>
);
};
export default Dashboard;
它应该是 t('hello')
而不是 t.hello
自从 t
是一个函数,而不是一个对象
最好是看看这里的文档。https:/react.i18next.comlatestusetranslation-hook。
你还需要在i18n.js中处理你的翻译文件。