next.js 如何使用模块联合将i18n实现到微前端应用程序中

wkftcu5l  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(157)

对于在模块联合微前端next.js应用中实现i18 n,你有什么建议?
目前(刚刚开始),我通过在_app.tsx中声明提供程序,让它与react-intl一起工作

<IntlProvider locale={locale} defaultLocale={defaultLocale} messages={enMessages}>
    <SiteLayout>
      <Component {...pageProps}></Component>
    </SiteLayout>
  </IntlProvider>

然后,当从另一个微前端导入组件时,我会将intl对象作为param发送。

const XComponent = (await import('microApp2/XComponent')).default;
export default function ShellApp(): React.ReactElement {
  const intl = useIntl();
  return <XComponent intl={intl} />;
}

所以在微应用组件中,我可以使用它来格式化字符串。

export default XComponent = (props: XComponentProps): React.ReactElement => {
  const { intl } = props;
  return (<div>{intl.formatMessage({ id: 'XComponent.Description' })}</div>);
}

这种方法的警告是,我只能使用函数格式化,我不能使用React DOM标签,如:
<FormattedMessage id="" />
我没有找到太多的文档,所以不确定这是一个好方法。有没有人知道或建议其他解决方案?
先谢谢你了!

x8diyxa7

x8diyxa71#

您可能需要用<IntlProvider> Package 每个主机,并从全局源获取当前语言的值(如URL或通过cookie等的状态)。

相关问题