如何使用 Storybook 将组件国际化？ i18n 与故事书

Question

尝试链接 Storybook 和 i18n，但 Storybook 无法识别按键。
我已按照说明配置了文件。
翻译文件存储在 public/en/app.json 文件夹中。
控制台中的错误。 - request.js:44 GET http://localhost:6006/locales/en/app.json 404（未找到）

config/storybook/preview.tsx

import React, { Suspense } from 'react';
import type { Preview } from '@storybook/react';

import { I18nextProvider } from 'react-i18next';
import i18n from '../../src/shared/config/i18n/i18n';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },

  decorators: [
    (Story) => (
      <Suspense fallback="">
        <I18nextProvider i18n={i18n}>
          <Story />
        </I18nextProvider>
      </Suspense>
    ),
  ],
};

export default preview;

src/shared/config/i18n/i18n.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: false,
    debug: true,

    interpolation: {
      escapeValue: false,
    },

    react: { useSuspense: false },

    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },

  });

export default i18n;

示例（带有 i18n 的故事书组件 - 挂钩 useTranslate）

......

import { AppLink } from 'shared/ui/AppLink';

export const Sidebar: FC = () => {
  const { t, ready } = useTranslation('app');

  if (!ready) {
    return null;
  }

  return (
    <div>
          <AppLink to="/">
            <span>{t('sidebar.link.home')}</span>
          </AppLink>

          <AppLink to="/about">
            <span>{t('sidebar.link.about')}</span>
          </AppLink>
    </div>
  );
};

“请参阅上面附加的文件

Answer 1

我也遇到同样的问题，请问你解决了吗？我已经尝试解决这个问题 5 天了，你能帮我吗