使用 dvajs 将 i18next 添加到 ReactJS 项目

Question

我有一个使用 dva 的 ReactJS 项目（https://github.com/dvajs/dva，https://dvajs.com/API.html）。我正在尝试通过关注 this youtube video 将 i18next 添加到项目中。 但是好像i18next没能插进项目里。结果，加载页面

localhost:8000/#/addin

返回以下错误。有人能帮忙吗？

The above error occurred in the <withI18nextTranslation(Addin)> component:
    in withI18nextTranslation(Addin) (created by Connect(withI18nextTranslation(Addin)))
    in Connect(withI18nextTranslation(Addin)) (at router.tsx:79)
    in Route (at router.tsx:78)
    in Switch (at router.tsx:40)
    in Fe (at Theme/index.tsx:33)
    in Theme (at layouts/index.tsx:42)
    in BasicLayout (created by Route)
    in Route (created by withRouter(BasicLayout))
    in withRouter(BasicLayout) (at router.tsx:39)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (at router.tsx:38)
    in AwaitPromiseThenRender (at router.tsx:34)
    in Provider (created by DvaRoot)
    in DvaRoot

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://.../react-error-boundaries to learn more about error boundaries.

代码如下：

我首先创建了

src/i18n.js

，如视频所示。

import i18next from "i18next";
import HttpBackend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

const apiKey = "1B4SDzcwnnNYK2ytKAiETw";
const loadPath = `https://api.i18nexus.com/project_resources/translations/{{lng}}/{{ns}}.json?api_key=${apiKey}`;

i18next
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",

    ns: ["default"],
    defaultNS: "default",

    supportedLngs: ["en","zh"],
    
    backend: {
      loadPath: loadPath
    }
  })

然后我修改了

src/index.tsx

如下，增加了

import './i18n.js'

（我猜这里可能是错误的）：

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

import dva from 'dva';
import './index.css';
import router from './router';
import AuthModel from './models/auth';
import SubscribtionModel from './models/subscription';
import AppModel from './models/app';
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
import './i18n.js'

//@ts-ignore
//import createLoading from 'dva-loading';

initializeIcons();

// 1. Initialize
const app = dva();
//app.use(createLoading());

// 2. Plugins
// app.use({});

// 3. Model
//@ts-ignore
app.model(AuthModel);
app.model(SubscribtionModel)
app.model(AppModel);

// 4. Router
//@ts-ignore
app.router(router);

// 5. Start
app.start('#root');

在

src/router.tsx

中，是这样的：

import React from 'react';
import { routerRedux, Switch, Route } from 'dva/router';
import Layout from './layouts';
import { AwaitPromiseThenRender } from './components/AwaitPromiseThenRender';

const { ConnectedRouter } = routerRedux;
function RouterConfig({ history }: any) {
  //@ts-ignore
  return (
    <AwaitPromiseThenRender
      //@ts-ignore
      promise={typeof window.__$$notInOffice !== "undefined" ? Promise.resolve(true) : Office.onReady()}
    >
      <ConnectedRouter history={history}>
        <Layout>
          <Switch>
            <Route exact path="/addin">
              <Addin />
            </Route>
          </Switch>
        </Layout>
      </ConnectedRouter>
    </AwaitPromiseThenRender>
  );
}

export default RouterConfig;

在

src/components/Addin/index.tsx

，我有

import React, { lazy, ChangeEvent, useEffect } from 'react';
import { State as ReduxState } from '../../store/reducer';
import { connect } from 'dva';
import selectors from '../../selectors';
import { withTranslation } from 'react-i18next';

interface IProps {
  placeholder: string;
  app: string;
  uid: string;
  t: any;
}

interface IState {
}

class Addin extends React.Component<IProps, IState> {  
  render() {
    return (
      <div></div>
    );
  }
}

export default connect((state: ReduxState) => ({
  app: selectors.app.selectAppName(state),
  uid: selectors.auth.getUid(state)
}))(withTranslation()(Addin));

有谁知道将 i18next（使用 i18next-http-backend）插入该项目的正确方法是什么？