NextJS 13（Beta）动态路由参数非英文Unicode兼容问题求助

在NextJS 13（Beta）的App Router中，使用动态路由参数时，若参数包含英语以外的Unicode语言（如印地语），params.slug会返回URL编码后的字符串，而非原始文本：

• 路由结构示例：app/shop/[slug]/page.js
• 访问app/shop/this-is-shop/page.js时，params.slug正常返回this-is-shop；
• 访问app/shop/यह-दुकान-है/page.js时，params.slug返回%E0%A4%B9-%E0%A4%A6%E0%A5%81%E0%A4%95%E0%A4%BE%E0%A4%A8-%E0%A4%B9%E0%A5%88，而非预期的यह-दुकान-है。

解决方法 #

使用JavaScript内置的decodeURIComponent()方法对编码后的参数解码，还原原始Unicode文本：

// app/shop/[slug]/page.js
export default function ShopPage({ params }) {
  const decodedSlug = decodeURIComponent(params.slug);
  return <div>当前商品：{decodedSlug}</div>;
}

说明 #

浏览器会自动对URL中的非ASCII字符进行编码，NextJS传递路由参数时保留了编码结果，因此需要手动解码。该方法适用于所有Unicode语言的路由参数（如中文、印地语等）。

内容的提问来源于stack exchange，提问作者Rajendra A Verma