如何在反应中使用参数重定向到其他页面答案

【问题标题】：How to redirect to other page with parameters in react如何在反应中使用参数重定向到其他页面
【发布时间】：2021-07-26 14:01:39
【问题描述】：

我在付款成功后将条带与react now集成我想重定向到另一个页面

await stripe
      .confirmCardPayment(CLIENT_SECRET, {
        payment_method: {
          card: elements.getElement(CardElement),
          billing_details: {
            name: name,
          },
        },
        receipt_email: username,
      })
      .then(async function(result) {
        if (result.paymentIntent) {
          const formData = new FormData();
          let date = new Date(result.paymentIntent.created * 1000);
          formData.append('productId', productId); // in this line everything is fine and productId is defined here
          formData.append('dateCreated', date);
          const savePaymentIntent = await axios
            .post(
              // backend url,
              formData,
              config,
            )
            .then(r => {
              console.log(r);
              if (r.status === 201) {
                self.setState({ isPaymentPending: true });
                history.push('/user/${productId}/product-detail'); //Issue is in this line productId is undefined in url 
              }
            })
            .catch(e => {
              console.log(e);
            });
        } else if (result.error) {
           // some error handling code
        }
      });

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

http://localhost:3000/user/$%productId%7D/product-detail

每当我为后端 productId 创建 formData 时，那里就存在，但是此行中，支付成功后跳转到商品详情页面，但productId未定义

【问题讨论】：

您能否更新您的问题以包括您如何定义您的路线以及您希望在该特定路径上呈现的组件？
我的代码在重定向和渲染组件时工作正常，但问题是 productId id 未定义，这就是为什么在 url localhost:3000/user/$%productId%7D/product-detail 但在 formData 我得到的是 productId，我认为是问题在历史中。推送
哦，你只是说productId 在这段代码中是未定义的吗？在这个 sn-p 中声明在哪里？
我更新了代码并在 formData 中看到 productId 存在，但在获得成功响应后，我认为我做错了什么是 history.push
哦，我明白了，你打错了：history.push('/user/${productId}/product-detail'); 应该是 history.push(`/user/${productId}/product-detail`);。您正在传递字符串文字与插值字符串模板。投票以“无法重现或由拼写错误引起”结束。

标签： javascript reactjs stripe-payments

【解决方案1】：

你的代码有错误。

              if (r.status === 201) {
                self.setState({ isPaymentPending: true });
                history.push('/user/${productId}/product-detail'); //Issue is in this line productId is undefined in url 
              }

应该使用 ` 代替引号，或者使用 + 来添加字符串

             if (r.status === 201) {
                self.setState({ isPaymentPending: true });
                history.push(`/user/${productId}/product-detail`); //Issue is in this line productId is undefined in url 
              }

【讨论】：