React Router路径参数含斜杠导致路由跳转失败问题求助

默认情况下，React Router的路径参数（比如:username）只会匹配到下一个斜杠前的内容，所以当你的username包含斜杠时，路由会把它拆分成多个独立路径段，自然匹配不上/name/:username的规则。下面给你两种可行的解决方案：

方案1：修改路由规则，允许参数包含斜杠 #

在路由配置里给参数加上正则匹配，让它能捕获包括斜杠在内的任意字符：

<Route exact path="/name/:username(.*)" component={Home}/>

跳转的时候，记得先对含斜杠的参数进行编码，避免路径解析错误：

const username = "/john/bradley";
<Link to={`/name/${encodeURIComponent(username)}`}>Click Here</Link>

在Home组件里获取参数时，再解码还原：

const { username } = props.match.params;
const decodedUsername = decodeURIComponent(username);

方案2：改用查询参数传递（更稳妥） #

如果不想修改路由规则，可以把带斜杠的参数放到查询参数里：

1. 调整路由配置：

<Route exact path="/name" component={Home}/>

2. 跳转时构造带查询参数的路径：

const username = "/john/bradley";
<Link to={{
  pathname: "/name",
  search: `?username=${encodeURIComponent(username)}`
}}>Click Here</Link>

3. 在Home组件里获取查询参数：

const searchParams = new URLSearchParams(props.location.search);
const username = searchParams.get('username');
const decodedUsername = decodeURIComponent(username);

两种方案里，方案1更贴合你原本的路由结构，方案2则避免了路由规则的特殊配置，根据你的场景选择即可。

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