React带参数跳转页面：Stripe支付成功后history.push参数失效问题

• 跳转生成的异常URL，本质是JS字符串插值语法使用错误：
  你编写跳转路径时，用单引号包裹了带${productId}的内容，但JS中单引号、双引号包裹的是普通字符串，不会解析内部的${变量}占位符，只会把${productId}当成纯文本字符处理；这类字符经浏览器URL编码后，就会出现你看到的$%productId%7D形式（其中{会被编码为%7B，}会被编码为%7D）。
• 你在提交后端表单时productId能正常传入，是因为formData.append('productId', productId)直接引用了变量本身，没有涉及字符串内部的插值逻辑，说明productId变量本身是有值的，问题只出在跳转路径的字符串写法上。

在保证React Router的history对象正常可用的前提下，两种写法都可以实现正确的参数替换：

• 改用反引号（`，键盘左上角ESC按键下方的符号）包裹模板字符串，让JS正确解析插值：

  history.push(`/user/${productId}/product-detail`);
  

• 用纯字符串拼接构造路径，避免引号语法混淆：

  history.push('/user/' + productId + '/product-detail');
  

.then(r => {
  console.log(r);
  if (r.status === 201) {
    self.setState({ isPaymentPending: true });
    // 替换原错误的跳转行
    history.push(`/user/${productId}/product-detail`);
  }
})

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