react-admin中如何从URL路径获取并管理语言配置

核心前提 #

react-admin本身的语言状态是完全开放可自定义的，默认存在Redux里只是内置实现，根本不需要依赖付费版的持久化能力，就能实现路径带语言前缀的需求——本质就是把URL里的语言标识作为整个应用语言状态的唯一可信来源，同步给react-admin的内置i18n体系就行。

具体实现步骤 #

• 先调整外层路由结构，把语言段作为一级路径参数
  把原本的业务路由全部挂载到/:locale/*的路由规则下，让所有页面路径的第一段都是语言标识，比如访问/fa/posts时，路由层首先就能解析出fa这个值。解析到值之后第一步先做合法性校验：如果提取到的语言标识不在项目支持的语言列表里，直接重定向到默认语言的错误页，避免无效路径匹配到业务页面。
• 把路径解析到的语言值同步给react-admin的i18n体系
  完全不需要手动操作Redux store，直接用react-admin内置的两个钩子就能完成状态同步：
  • 用useLocale拿到当前react-admin内部存储的语言值
  • 用useSetLocale拿到内置的语言切换方法
    同步逻辑非常简单：当检测到路径解析出的语言值和react-admin内部存的语言值不一致时，直接调用内置的setLocale方法把内部值改成路径里的语言就行。这里可以写个简单的包裹组件做全局同步，代码大概长这样：

  // 全局语言同步包裹组件
  import { useEffect } from 'react';
  import { useParams, Navigate } from 'react-router-dom';
  import { useLocale, useSetLocale } from 'react-admin';
  
  // 项目配置的支持语言列表和默认语言
  const SUPPORTED_LOCALES = ['fa', 'en', 'zh'];
  const DEFAULT_LOCALE = 'en';
  
  export const LocaleRouterWrapper = ({ children }) => {
    const { locale } = useParams();
    const adminCurrentLocale = useLocale();
    const setAdminLocale = useSetLocale();
  
    // 非法语言路径兜底
    if (!SUPPORTED_LOCALES.includes(locale)) {
      return <Navigate to={`/${DEFAULT_LOCALE}/404`} replace />;
    }
  
    // 自动同步语言状态
    useEffect(() => {
      if (locale !== adminCurrentLocale) {
        setAdminLocale(locale);
      }
    }, [locale, adminCurrentLocale, setAdminLocale]);
  
    return children;
  };
  

• 改造语言切换的交互逻辑
  不要让语言切换操作只修改react-admin的内部状态，要把语言切换的动作和URL跳转绑定：比如用户在页面上点击切换语言从波斯语fa切到中文zh，不要只调用setLocale方法，要跳转到/zh/加上当前页面的剩余路径部分（比如原来在/fa/posts，切换后就跳转到/zh/posts），保证URL里的语言标识和实际生效的语言永远一致，不会出现路径和语言不匹配的问题。
• 加初始访问的重定向逻辑
  当用户不带语言前缀直接访问根路径下的页面（比如直接访问www.testteeetweb.com/posts），要做自动匹配逻辑：先读取浏览器的首选语言，匹配到项目支持的语言就重定向到对应语言前缀的路径，匹配不到就跳转到默认语言的页面，避免用户看到无语言前缀的异常页面。

容易踩的坑 #

• 不要把内部Redux存的语言值当成可信来源，所有语言判断逻辑都要以URL解析的结果为准，内部存的值只是同步后的副本，不然会出现刷新页面、直接输路径时语言和路径不匹配的问题。
• 路由配置要把语言参数段放在最外层的匹配规则里，不要把语言段当成普通业务资源配置，避免路径匹配冲突——比如如果把fa当成单独的资源页配置，会和波斯语的路径规则撞车。
• 初始挂载Admin组件的时候，要把第一次从URL解析到的语言值作为初始i18n配置传入，不要等组件加载完再异步切语言，不然会出现首屏闪一下默认语言的问题。

内容的提问来源于stack exchange，提问作者Tashkhisi