React新手配置动态路由时Link无法匹配对应Route的问题咨询

你现在的写法把两种完全独立的React Router传参逻辑揉到了一起，导致路由匹配规则和实际跳转的URL结构完全错位，自然无法正常关联跳转。

具体错误拆解 #

• React Router的path匹配逻辑只识别?分隔符之前的路径部分，?后面的查询字符串（query参数）完全不参与路径匹配。你写的"/verify?token/:code"会被路由当成纯静态路径去匹配，和实际跳转的URL根本对不上。
• 你当前写的Link拼接后实际指向的URL是/verify?token/你的code值，和你设置的匹配路径/verify?token/:code不存在有效映射，跳转后自然无法命中对应Route。

可直接套用的正确实现 #

根据你想要的URL结构，选对应场景修改即可：

场景1：需要把code作为动态路径参数传递（最终URL结构类似 /verify/12345?token=abcdef） #

• 调整Route配置，把动态参数段放到?之前的路径部分，不要把query内容写进path规则：

  <Route path="/verify/:code" exact component={ListEmployeeComponent} />
  

• 调整Link跳转配置，把code放到路径段，token作为query参数拼在URL后面：

  <Link to={`/verify/${token.code}?token=${token.token}`}>here is verify</Link>
  

  后续在ListEmployeeComponent中，可以通过路由提供的useParams钩子拿到路径里的code，通过useLocation钩子解析query字符串拿到token值。

场景2：不想把code露在路径段，想把token、code都作为query参数传递（最终URL结构类似 /verify?token=abcdef&code=12345） #

• Route只需要匹配基础路径即可，完全不需要在path里写参数规则：

  <Route path="/verify" exact component={ListEmployeeComponent} />
  

• 调整Link跳转配置，把两个参数都拼到query部分：

  <Link to={`/verify?token=${token.token}&code=${token.code}`}>here is verify</Link>
  

  后续在组件里直接解析location的search字段，就能同时拿到token和code两个值。

新手常见踩坑提醒 #

别把三类路由传参的规则搞混：

• 动态路径参数：写在Route的path规则里，格式为/xxx/:paramName，属于路径的一部分，参与路由匹配
• Query查询参数：以?key=value的形式接在路径后面，不参与路由匹配，把这类参数写在Route的path里完全无效
• 内存传参（state）：存在history对象中，不会显示在URL里，刷新页面后参数就会丢失

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