React页面加载时如何根据用户语言自动跳转至/en/或/fr/对应语言路径？

默认你的项目已经配置了多语言路由规则，比如/en、/zh-CN、/ja这类路径对应不同语言的页面，以下是具体实现逻辑：

1. 核心逻辑梳理 #

• 先提前配置项目支持的语言列表和默认兜底语言，避免跳转到不存在的语言路径
• 页面初始化时优先判断当前访问路径是否已经包含语言前缀，如果已经有了就不跳转，避免出现死循环
• 路径无语言前缀的情况下，读取navigator.language的值匹配支持的语言，匹配失败就用默认语言
• 执行跳转时保留原路径的查询参数、哈希值，避免用户访问深层路径时跳转到首页

2. 基于React Router v6的实现代码 #

2.1 定义基础配置和工具函数 #

// 配置支持的语言列表和默认语言
const SUPPORTED_LANGUAGES = ['en', 'zh-CN', 'ja', 'ko']
const DEFAULT_LANGUAGE = 'en'

// 匹配浏览器语言的工具函数，适配zh-CN、en-US这类带地区的语言格式
const getMatchedLanguage = () => {
  const browserLang = navigator.language
  // 优先全匹配
  if (SUPPORTED_LANGUAGES.includes(browserLang)) return browserLang
  // 匹配失败就取语言前缀匹配
  const shortLang = browserLang.split('-')[0]
  return SUPPORTED_LANGUAGES.find(lang => lang.startsWith(shortLang)) || DEFAULT_LANGUAGE
}

2.2 根组件添加跳转逻辑 #

import { useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'

function App() {
  const navigate = useNavigate()
  const location = useLocation()

  useEffect(() => {
    const pathname = location.pathname
    // 检查当前路径是否已经有语言前缀
    const hasLangPrefix = SUPPORTED_LANGUAGES.some(lang => pathname.startsWith(`/${lang}`))
    if (hasLangPrefix) return

    // 匹配目标语言
    const targetLang = getMatchedLanguage()
    // 拼接跳转路径，保留原路径所有参数
    const targetPath = `/${targetLang}${pathname}${location.search}${location.hash}`
    // 用replace跳转，不会在历史记录中冗余记录
    navigate(targetPath, { replace: true })
  }, [location, navigate])

  // 原有路由渲染逻辑
  return <>{/* 路由出口 */}</>
}

export default App

3. 注意事项 #

• 如果你的项目支持用户手动切换语言，可以优先读取localStorage中存储的用户偏好语言，优先级高于浏览器默认语言，修改工具函数即可：

const getMatchedLanguage = () => {
  const savedLang = localStorage.getItem('user-preferred-lang')
  if (savedLang && SUPPORTED_LANGUAGES.includes(savedLang)) return savedLang
  // 原有浏览器语言匹配逻辑保持不变
  const browserLang = navigator.language
  if (SUPPORTED_LANGUAGES.includes(browserLang)) return browserLang
  const shortLang = browserLang.split('-')[0]
  return SUPPORTED_LANGUAGES.find(lang => lang.startsWith(shortLang)) || DEFAULT_LANGUAGE
}

• 如果是SSR框架（比如Next.js）可以直接在服务端读取请求头的Accept-Language字段做跳转，不需要等待客户端JS加载，跳转体验更流畅
• 不要使用push方法跳转，否则用户点击返回按钮会回到无语言前缀的路径，触发二次跳转影响体验

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