toMedia
国际化

React Router

在 React Router 中实现 Fumadocs 国际化路由

设置

使用 defineI18n() 在专用文件中配置 i18n 设置,指定默认语言和支持的语言列表。

路由

在所有路由中添加 :lang 参数前缀以启用基于语言的路由。这会从 URL 路径中捕获语言段。

可选语言参数

路由可以使用 :lang? 使语言可选,配合 i18n 设置中的 hideLocale: 'default-locale' 配置选项。

翻译

使用 defineI18nUI() 定义 UI 翻译,包含特定语言的显示名称和 UI 字符串。函数接受 i18n 配置和按语言代码组织的翻译对象。

本地化布局选项通过接受 locale 参数的 baseOptions() 函数传递。

页面中的实现

在根布局组件中将翻译配置传递给 <RootProvider />。使用 useParams() hook 提取当前 locale,缺少时默认使用配置的默认语言。

传递 Locale 到 Fumadocs

创建 source loader 时包含 i18n 选项。在页面加载器中调用 source.getPage()source.getPageTree() 方法时传递当前 locale 参数。

搜索配置

对于内置 Orama 搜索,请参考 Orama 特定的 i18n 文档。Algolia 等云方案通常有原生多语言支持。

导航

使用 useParams() 获取当前 locale 以构建语言感知链接。fumadocs-core 的 DynamicLink 组件支持 MDX 内容中带有 locale 占位符的动态 href 模式。

On this page