Next.js 14兜底路由中令牌作为链接的显示不一致问题求助

这是URL自动编码导致的问题：$属于URL保留字符，浏览器跳转时会自动把它编码成%24，所以你从params里拿到的是编码后的字符串，解码就能得到原始令牌。

解决步骤（App Router） #

1. 服务器组件中解码

在兜底路由的page.js里（比如app/[...token]/page.js），用decodeURIComponent解码参数：

import { decodeURIComponent } from 'node:querystring';

export default function TokenPage({ params }) {
  // 兜底路由的params.token是数组，取最后一项就是目标令牌
  const rawToken = decodeURIComponent(params.token.at(-1));
  console.log(rawToken); // 输出原始的$2b$10$st1pBEJx.g3aWVVrkYl1GOXr2u1OZNCsC1okCWgOlSmiGNEN4YzY6
  return <div>原始令牌：{rawToken}</div>;
}

2. 客户端组件中解码

如果是客户端组件，用useParams获取参数后解码：

'use client';
import { useParams } from 'next/navigation';
import { decodeURIComponent } from 'node:querystring';

export default function TokenPage() {
  const params = useParams();
  const rawToken = decodeURIComponent(params.token.at(-1));
  console.log(rawToken);
  return <div>原始令牌：{rawToken}</div>;
}

关键说明 #

• 所有URL特殊字符（比如$、&、=等）都会被自动编码，只要涉及这类参数，都需要解码才能拿到原始值。
• 兜底路由的params返回的是数组，记得根据你的路由结构取对应位置的参数（这里令牌是最后一段，所以用at(-1)）。

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