reactjs - useTranslation 在反应钩子中不起作用?
问题描述
我有一个使用反应钩子编写的项目,我想更改语言。我使用 i18n,但是当我使用 useTranslation 更改语言时,它会加载很长时间,我不知道如何修复它。请帮我解决这个问题,并为我糟糕的英语感到抱歉。
文件路径:
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;
文件仪表板.js:
const Dashboard = ({ className = '' }) => {
const { t, i18n } = useTranslation();
return (
<div>
<Typography>{t.hello}</Typography>
</div>
);
};
export default Dashboard;
解决方案
它应该t('hello')
而不是t.hello
因为t
是一个函数,而不是一个对象
推荐阅读
- java - 签署带有附加签名的动态生成的 PDF 文件
- python - python中从零开始的朴素贝叶斯分类器?
- java - 如何在 Eclipse 中为我的 java 应用程序创建 .keystore 文件
- reactjs - 如何在功能组件内成功调度 redux 后检索数据
- kubernetes - 检测 pod 是否使用任何类型的本地存储
- c++ - C++中可重用的成员函数
- azure-devops - 为什么我们在 Azure Devops 中使用管道下的环境?并且在创建构建/发布方面是否有任何每月/每年的限制?
- python - 使用 Rich 设置不同的背景颜色
- python - 集群数据的可视化
- r - 在 echarts4r 中删除千位逗号