Next.js动态路由无法读取含特殊字符#的完整UUID参数问题

你在Next.js中使用文件夹路由[profile]/profile/[uuid]/page.tsx，当访问类似http://localhost:3000/profile/testMe#6216的URL时，期望通过params.uuid拿到完整的用户名testMe#6216，但实际只能获取到#之前的testMe。

原因很明确：URL中的#是锚点（Fragment）标识符，浏览器会将#及其后面的内容保留在客户端，不会发送给服务器，所以Next.js的路由参数无法直接读取这部分内容。

以下是几种可行的解决方案：

方案一：编码特殊字符后作为路由参数传递 #

这是最稳妥的方案，适用于服务端和客户端组件：

1. 在生成跳转链接或手动输入URL时，把用户名中的#编码为%23（URL编码格式）。比如将testMe#6216编码为testMe%236216，对应的URL为http://localhost:3000/profile/testMe%236216。
2. 在组件中获取到params.uuid后，通过decodeURIComponent()解码得到原始用户名：

   import React from 'react';
   import UserProfilePage from '@/screens/UserProfilePage';
   
   const OtherProfileView = ({ params }) => {
     const fullUuid = decodeURIComponent(params.uuid);
     console.log('----------- 完整用户名: ', fullUuid); // 输出 testMe#6216
   
     return <UserProfilePage account={{ params: { ...params, uuid: fullUuid } }} />;
   };
   
   export default OtherProfileView;
   

3. 如果是通过Next.js的Link组件跳转，提前对用户名编码：

   import Link from 'next/link';
   
   // 示例：跳转到包含#的用户页面
   const username = 'testMe#6216';
   <Link href={`/profile/${encodeURIComponent(username)}`}>查看用户</Link>
   

方案二：客户端组件中结合window.location.hash获取 #

如果必须保留URL中的#格式（比如业务需求），可以在客户端组件中手动拼接params和hash部分：

'use client'; // 必须声明为客户端组件
import React, { useEffect, useState } from 'react';
import UserProfilePage from '@/screens/UserProfilePage';

const OtherProfileView = ({ params }) => {
  const [fullUuid, setFullUuid] = useState(params.uuid);

  useEffect(() => {
    // 提取hash部分，去掉开头的#
    const hashContent = window.location.hash.slice(1);
    if (hashContent) {
      setFullUuid(`${params.uuid}#${hashContent}`);
    }
  }, [params.uuid]);

  console.log('----------- 完整用户名: ', fullUuid);

  return <UserProfilePage account={{ params: { ...params, uuid: fullUuid } }} />;
};

export default OtherProfileView;

注意：这个方法只能在客户端组件中使用，因为window对象仅存在于浏览器环境。

方案三：改用查询参数传递 #

将包含特殊字符的用户名放在查询参数中，同样需要先编码：

1. 构造URL：http://localhost:3000/profile?uuid=testMe%236216
2. 在组件中通过searchParams获取并解码：

   import React from 'react';
   import UserProfilePage from '@/screens/UserProfilePage';
   
   const OtherProfileView = ({ searchParams }) => {
     const encodedUuid = searchParams.get('uuid');
     const fullUuid = encodedUuid ? decodeURIComponent(encodedUuid) : '';
     console.log('----------- 完整用户名: ', fullUuid);
   
     return <UserProfilePage account={{ params: { uuid: fullUuid } }} />;
   };
   
   export default OtherProfileView;
   

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