How to use react-i18next translate routes in .umirc.ts?

[EugeneGohh]

I'm currently using react-i18next, a third-party library suggested by Ant Design to do internationalisation. However, I come across a problem where it seems like impossible to translate the routes located in .umirc.ts. Are there any possible workarounds where I can translate the routes?

.umirc.ts

  routes: [
    {
      path: '/user',
      layout: false,
      routes: [
        {
          path: '/user/login',
          component: './User/Login',
        },
      ],
    },
    {
      name: '0. Tenant',
      icon: 'shop',
      path: '/tenant',
      component: './Tenant',
      access: 'isAdmin',
      routes: [
        {
          path: '/tenant/:id',
          component: './Tenant',
        },
      ],
    }
  ]

[EugeneGohh]

@chenshuai2144

[natashaamin]

Add in locale key

routes: [ { path: '/user', layout: false, locale: 'your_locale_value', routes: [ { path: '/user/login', component: './User/Login', locale: 'your_locale_value', }, ], } ]

[EugeneGohh]

Thanks for the reply. However, I've tried the solution but it's still not working from my side. I'm using react-i18next library for doing i18n.

[natashaamin]

1. try create i18n.ts file in the directory

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: en
    }
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false
  }
});

export default i18n;

2. then wrap your root component with i18nextprovider

### import React from 'react';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import './index.less';

export default ({ children }) => (
  <I18nextProvider i18n={i18n}>
    {children}
  </I18nextProvider>
);