react-router-dom的Link组件编码URI后地址栏不显示编码结果的问题

嘿，这个问题我之前踩过坑！其实核心原因是react-router-dom内部会自动对路由路径做解码处理，再加上浏览器地址栏本身的规范化显示逻辑，才导致你看到的现象：悬停能看到编码后的内容，但地址栏展示的是解码后的可读形式。

具体原因拆解： #

• 浏览器地址栏的默认行为：浏览器为了让用户更容易阅读URL，会自动把编码后的字符还原成原始可读形式（比如把%E5%BC%A0%E4%B8%89显示成张三），但实际在网络传输、路由匹配时，用的还是编码后的真实值。你可以试试复制地址栏的URL粘贴到文本编辑器，就能看到编码后的内容了。
• react-router-dom的内部处理：当你给Link的to属性传入编码后的路径时，react-router会先对路径进行解析和解码，确保路由匹配逻辑能正确识别路径结构，避免因为编码导致路由匹配失败。

正确的编码姿势： #

其实大部分场景下，你不需要强制让地址栏显示编码后的内容，因为浏览器和react-router的这套逻辑完全不影响功能。但如果是动态参数的场景，推荐只对参数部分编码，而不是整个URL：

比如你的路由是/detail/:id，参数里包含特殊字符（中文、空格、符号等），可以这样写：

<Link key={i} to={`/detail/${encodeURIComponent(item.id)}`}>
  {item.text}
</Link>

然后在目标页面用useParams获取参数时，react-router会自动帮你解码：

import { useParams } from 'react-router-dom';

const DetailPage = () => {
  const { id } = useParams();
  // 这里拿到的id已经是解码后的原始值，直接用就行
  return <div>详情ID：{id}</div>;
};

特殊需求：强制地址栏显示编码内容？ #

如果确实有特殊场景需要地址栏显示编码后的字符，其实很难完全控制——因为浏览器的地址栏显示逻辑是浏览器自身的行为，框架层面很难干预。不过你可以试试用useNavigate手动跳转，直接传入编码后的完整路径：

import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();
  
  const handleJump = () => {
    const encodedUrl = encodeURIComponent('/user/张三');
    navigate(encodedUrl);
  };

  return <button onClick={handleJump}>跳转</button>;
};

但要注意：这种写法可能会导致路由匹配异常，因为react-router会把编码后的整个字符串当成路径的一部分，所以除非你明确知道自己在做什么，否则不推荐这么干。

总结一下：不用纠结地址栏的显示形式，只要路由能正常跳转、参数能正确获取，这套编码/解码逻辑就是正常工作的~

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