使用React Router DOM从URL获取token时为何自动截断？

核心原因 #

你的URL里的#是URL的哈希片段分隔符，浏览器会自动把#及其后面的内容从查询参数（?后的部分）中分离出来，当作页面锚点或前端路由的哈希部分，不属于查询参数的范围。

看你的URL结构：

http://localhost:4205/?token=[第一部分]#[第二部分]

React Router的searchParams.get('token')只能读取?到#之间的内容，也就是[第一部分]，所以获取到的token长度只有108，而完整的token是[第一部分]#[第二部分]，总长度197。

解决办法 #

1. 对token中的#进行URL编码：把#替换为%23，这样整个字符串就会被当作查询参数的一部分，不会被浏览器解析为哈希分隔符。修改后的URL应该是：

http://localhost:4205/?token=rO0ABXdJAAlhZG1pbi13ZWIAAAGBQW7DvQAAAAAAJDQwNDVkNWU2LWUwYzQtNDkyOC1iZjI5LTI0ZTgwOGNkZDIyZQAAAAAAAeecAAAAAA==%23LxbtdufwktgB49NKgqDwH6yisPjSRHV/k0bXUt/0+z3rLB8vFr3uWX39pzC6uVz1KgVw89S9Vku7cQp1Q1YZrQ==

此时searchParams.get('token')就能拿到完整的197长度的token。

2. 检查URL生成逻辑：如果这个URL是后端生成的，要确保后端在生成查询参数时，对所有URL保留字符（包括#、&、=等）进行URL编码，避免特殊字符破坏参数结构。

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