React Router如何配置路由接收含斜杠的密码重置令牌

我使用Identity Framework生成的密码重置令牌中包含斜杠（/），示例链接如下：http://localhost:3000/reset/CfDJ8Gnkh7D2epVEspI7K8JRxtKUjYdzndyduSAhrrg7LjshyYkTwbxzYr3E9CPxBcsPLoocEjplmvaV/Qjug+ez2Kwb0USdwdWMzQm4zJuWiZ1U9+ITrWeUdskiHO9QbdFnfQ/4+ME3TuItAKza0ZrYvi+46f3eiSKVhhe9LhGNWKQRB0KToAMQn7pE1gijIhc5wdPsA+jCCb5ebvDFYIeqo2Yvl/AAuehhpE1mTOWi4alw。尝试以下两种路由配置均无法完整获取该令牌，请问应如何正确设置路由路径？

配置示例：

{
    path: '/reset/:token*',
    element: <ResetSetup />,        
}

or
{
    path: '/reset/:token',
    element: <ResetSetup />,        
}

核心问题是令牌中的斜杠被浏览器当作路径分隔符解析，导致路由无法将其识别为单一的完整参数。可以通过以下两种方式解决：

1. 对令牌进行URL编码（推荐方案） #

在后端生成重置链接时，先将Identity Framework生成的令牌做URL编码，把斜杠（/）转成%2F、加号（+）转成%2B。这样整个令牌会被浏览器识别为一个完整的路径参数，不管用/reset/:token还是/reset/:token*都能拿到完整值。

后端编码示例（C#）：

var token = await userManager.GeneratePasswordResetTokenAsync(user);
var encodedToken = HttpUtility.UrlEncode(token);
var resetUrl = $"http://localhost:3000/reset/{encodedToken}";

前端拿到token参数后，用decodeURIComponent(token)解码即可得到原始令牌。

2. 用通配符路由手动拼接参数 #

如果不想做编码，可使用/reset/*的路由配置，然后在组件中手动提取完整的路径片段：

路由配置：

{
    path: '/reset/*',
    element: <ResetSetup />,        
}

在ResetSetup组件中通过useParams()获取通配符对应的内容，这部分就是包含所有斜杠的完整令牌：

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

function ResetSetup() {
    const { '*': token } = useParams();
    // token即为完整的带斜杠的重置令牌
}

注意：第二种方式可能会遇到加号（+）被解析为空格的问题，因此优先推荐URL编码的方案，能避免大部分参数解析异常。

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