Next.js 13中能否替代asPath获取不含语言前缀的路径？

以下是几种无需硬截取字符的可靠解决方法：

1. 结合国际化配置与正则匹配 #

如果已明确项目支持的语言列表（比如['en', 'zh', 'fr']），可以通过正则表达式精准匹配并移除开头的语言前缀：

import { usePathname } from 'next/navigation';

// 替换为你项目实际支持的语言列表
const SUPPORTED_LOCALES = ['en', 'zh', 'fr'];

export function useCleanPathname() {
  const pathname = usePathname();
  // 构建匹配开头语言前缀的正则，兼容 "/en" 或 "/en/" 格式
  const localeRegex = new RegExp(`^/(${SUPPORTED_LOCALES.join('|')})(/|$)`);
  // 移除前缀后返回干净路径
  return pathname.replace(localeRegex, '/');
}

这个方法适配不同长度的语言代码（比如zh-CN这类多段前缀），比固定截取字符更鲁棒。

2. 使用国际化库的内置API #

如果项目依赖next-intl这类主流国际化工具，它直接提供了返回不含语言前缀路径的钩子：

import { usePathname } from 'next-intl/client';

// 该usePathname返回的路径已自动移除语言前缀
const cleanPathname = usePathname();

借助成熟库的封装，无需自己处理正则或路径拆分，是最省心的方案。

3. 拆分路径段判断移除 #

通过拆分路径段的方式，直观判断并移除开头的语言前缀：

import { usePathname } from 'next/navigation';

const SUPPORTED_LOCALES = ['en', 'zh', 'fr'];

export function useCleanPathname() {
  const pathname = usePathname();
  // 拆分路径并过滤空段
  const pathSegments = pathname.split('/').filter(segment => segment);
  
  // 若第一个段是支持的语言，则移除
  if (pathSegments.length > 0 && SUPPORTED_LOCALES.includes(pathSegments[0])) {
    pathSegments.shift();
  }
  
  return '/' + pathSegments.join('/');
}

这种方法逻辑清晰，便于调试和修改，适合需要自定义路径处理逻辑的场景。

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