Next-intl项目中usePathname在切换语言时返回错误路径的解决方案

问题背景

在使用next-intl进行国际化路由管理时，开发者在切换语言时遇到了一个典型的路由匹配问题。具体表现为：当从英文页面/en/legal-mentions切换到法语页面/fr/mentions-legales时，usePathname钩子返回了错误的路由模板/[category_slug_plural]/[post_type]，而不是预期的/legal-mentions路径。

问题分析

这个问题的核心在于Next.js的并行路由(parallel routes)机制与next-intl的路由配置之间的交互方式。当使用并行路由时，开发者需要特别注意目录结构的对称性。

在next-intl的路由配置中，开发者定义了如下的路径映射：

pathnames: {
  '/': '/',
  '/legal-mentions': {
    en: '/legal-mentions',
    fr: '/mentions-legales',
  },
  '/[category_slug_plural]/[post_type]': {
    en: '/[category_slug_plural]/[post_type]',
    fr: '/[category_slug_plural]/[post_type]',
  },
}

根本原因

问题的根本原因在于并行路由的目录结构不一致。在Next.js中，并行路由要求所有语言版本的目录结构必须完全对称。如果主语言(en)的目录结构与目标语言(fr)的目录结构不一致，就会导致路由匹配失败，从而回退到动态路由模板。

解决方案

1. 确保目录结构对称：所有语言版本的页面目录结构必须保持一致。例如：

   /app
     /[lang]
       /legal-mentions
         page.tsx
       /mentions-legales
         page.tsx
   

2. 统一路由配置：在next-intl的配置中，确保所有语言版本的路径都指向相同的组件位置。

3. 使用中间件处理：可以通过中间件来规范化路由，确保不同语言的请求都能正确映射到对应的页面组件。

最佳实践

1. 保持目录结构简单：尽量避免在并行路由中使用过于复杂的目录结构。

2. 统一命名约定：为多语言页面建立统一的命名规范，便于维护和理解。

3. 测试路由切换：在开发过程中，应该全面测试所有语言切换场景，确保路由行为符合预期。

总结

这个案例展示了Next.js国际化路由配置中的一个常见陷阱。通过理解并行路由的工作原理和保持目录结构的对称性，开发者可以避免类似的路由匹配问题。在实现多语言网站时，合理的项目结构和清晰的配置是确保路由正确工作的关键。

对于使用next-intl的开发者来说，这个经验提醒我们：在享受国际化便利的同时，也需要关注底层路由机制的特殊要求，特别是在使用高级功能如并行路由时。