React-Router：移除URL中的%20空格转义符

嘿，我之前也碰到过一模一样的问题——用带空格的名称生成React Router路由时，URL里的%20看起来真的很不美观。下面给你几个可行的方案，既能让URL更清爽，又不会丢失名称的原始信息：

方案1：手动替换空格（简单直接） #

如果只是处理空格，用JavaScript原生的replace方法就能快速搞定，推荐替换成连字符-或者加号+，看你偏好哪种风格：

替换为连字符（视觉更清爽） #

<Link to={`/lookup/${props.data.name.replace(/\s+/g, '-')}`}>
  {props.data.name}
</Link>

这里用正则/\s+/g是为了匹配多个连续空格，一次性替换成单个连字符，避免出现David--Attenborough这种多余符号的情况。

替换为加号（URL标准格式） #

<Link to={`/lookup/${props.data.name.replace(/\s+/g, '+')}`}>
  {props.data.name}
</Link>

加号是URL中表示空格的标准方式之一，但视觉上不如连字符干净，根据你的需求选择即可。

注意：如果你的路由需要解析这个名称（比如在/lookup/:name组件中获取参数），记得在组件里把替换后的字符转回去，才能拿到原始名称：

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

function Lookup() {
  const { name } = useParams();
  // 把连字符转回空格
  const originalName = name.replace(/-/g, ' ');
  
  // 如果用的是加号，需要结合decodeURIComponent处理：
  // const originalName = decodeURIComponent(name.replace(/\+/g, ' '));
  
  // 之后用originalName去请求数据或展示即可
  return <div>查看{originalName}的信息</div>;
}

方案2：使用slugify工具（处理复杂场景） #

如果名称里还有特殊字符（比如引号、重音符号），手动替换就不够用了。推荐用专门的slug生成工具slugify，它能帮你生成标准的URL友好字符串：

1. 先安装依赖：

npm install slugify
# 或者使用yarn
yarn add slugify

2. 在组件中使用：

import slugify from 'slugify';

// 自定义配置生成slug
const nameSlug = slugify(props.data.name, {
  lower: false, // 是否转小写，按需设置
  replacement: '-', // 替换空格的字符，默认是连字符
  remove: /[*+~.()'"!:@]/g // 可选：移除不需要的特殊字符
});

<Link to={`/lookup/${nameSlug}`}>
  {props.data.name}
</Link>

这种方法能自动处理各种边缘情况，生成更专业的URL。如果你的后端存储了原始名称和对应的slug，直接用slug查询数据就行；如果没有，也可以把slug转回原始名称（不过如果有特殊字符被移除，可能会有小偏差，建议后端同步存储slug）。

方案3：标准编码（不推荐，仅作了解） #

虽然你不想看到%20，但还是提一下标准的URL编码方法encodeURIComponent——它就是你当前遇到%20的原因，所以直接pass就行：

// 这就是你现在的实现，会生成%20
<Link to={`/lookup/${encodeURIComponent(props.data.name)}`}>
  {props.data.name}
</Link>

总结 #

• 简单场景：手动替换空格为-或+就足够，成本最低；
• 复杂场景：用slugify工具处理更省心，能覆盖特殊字符等情况；
• 核心原则：跳转时的替换规则，要和路由解析时的还原规则保持一致，避免出现数据不匹配的问题。

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