前端多语言（服务端渲染）

当前比较成熟的多语言库:

react-i18next

react-intl

react-intl-universa

react-i18next

安装

npm install i18next react-i18next --save复制代码

定义语言资源

zh-CN.json

{
  "header.hello": "你好，{{name}}",
  "banner.superX.title": "标题",
  "banner.internship.training": "描述"
}

每个语言文件的key保证一致

初始化i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from 'shared/locales/en-US.json';
import cn from 'shared/locales/zh-CN.json';

const resources = {
  en: {
    translation: en,
  },
  cn: {
    translation: cn,
  },
};

export const initI18n = (locale = 'cn') => {
  i18n.use(initReactI18next).init({
    resources,
    lng: locale,
    interpolation: {
      escapeValue: false,
    },
  });
};

app.js引入

const App = ({ children, store, domainContext, mobileContext, insertCss }) => {
  const { locale } = store.getState().locale;

  return (
    <I18nextProvider i18n={initI18n(locale)}>{children}</I18nextProvider>
  );
};

server/midddlewares/render.js

如果cookie存在，则dispatch更新locale state状态

import { switchLocale as switchLocaleAction } from '../../shared/slices/locale';
export default async (req, res, next) => {
    const store = createStore({
      res,
      req,
      origin,
    });

    const { dispatch } = store;
    await dispatch(getInInternalTest());
    const locale = req.cookies[LOCALE];
    if (locale) {
      dispatch(switchLocaleAction(locale));
    }
}

slice/locale.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  locale: 'cn',
};

export const localeSlice = createSlice({
  name: 'locale',
  initialState,
  reducers: {
    switchLocale: (state, { payload }) => {
      state.locale = payload;
    },
  },
});

export const { switchLocale } = localeSlice.actions;

export default localeSlice.reducer;