Добавьте i18next в проект ReactJS с помощью dvajs.

Question

У меня есть проект ReactJS, в котором используется dva (https://github.com/dvajs/dva, https://dvajs.com/API.html). Я пытаюсь добавить i18next в проект, следуя этому видео на YouTube . Но похоже 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) к этому проекту?