React使用props创建动态路由时无法获取正确图片地址如何解决

你遇到的图片地址获取异常有两个核心原因：

1. Link跳转的路径拼接存在语法错误：你在price和image参数拼接时漏了路径分隔符/，写为了+product.price+""+product.image，两段参数直接拼接在了一起。
2. 动态路由的默认参数规则限制：React Router 动态参数默认只匹配单个不含斜杠的路径段，你的图片路径是类似static/media/xxx.jpg的多斜杠结构，路由只会将第一个斜杠前的static匹配给:image参数，后续路径内容全部丢失。

方案1：修改路由规则适配多斜杠参数 #

如果要保留路径传参的写法，做两处修改即可：

1. 给路由的image参数添加+修饰符，允许它匹配包含斜杠的所有后续路径：

<Route path="/prod/:id/:descr/:price/:image+"><MakePurchase /></Route>

2. 修正Link的路径拼接逻辑，补全price和image之间的斜杠：

<Link to={"/prod/"+product.id+"/"+product.descr+"/"+product.price+"/"+product.image}>

如果图片路径包含空格、特殊符号，建议拼接时用encodeURIComponent(product.image)编码，组件内读取时用decodeURIComponent(props.match.params.image)解码，避免匹配异常。

方案2：更推荐：用路由State传参（无路径限制） #

路径传参不适合传递带特殊字符、多斜杠的复杂内容，建议用路由隐式状态传参，路径更简洁也不会出现匹配问题：

1. 简化路由配置，只保留必要的id参数：

<Route path="/prod/:id"><MakePurchase /></Route>

2. Link跳转时通过state携带其他业务参数：

<Link 
  to={{
    pathname: `/prod/${product.id}`,
    state: {
      descr: product.descr,
      price: product.price,
      image: product.image
    }
  }}
>

3. 组件内直接从location.state读取参数即可：

return(
  <>
    <img src={props.location.state.image} alt=""/>
    <h2>{props.location.state.descr}</h2>
    <h3>Price: <span>₦</span>{props.location.state.price}</h3>
  </>
)

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