Stripe CheckoutForm 组件使用 <Link> 在 React Router 上不显示任何内容

Question

当我 <Link> 到 Stripe 的 CheckoutForm 组件时，什么都没有显示。我在这里 https://stripe.com/docs/recipes/elements-react#setup 遵循带有 React 的 Stripe 说明，但它不包括与 React Router 集成的步骤。

如果我将组件用作<CheckoutForm /> 而不是<Link to='/checkoutForm' /> 与路由器一起使用，则它可以正常工作。

我尝试使用 <stripeProvider> 和 <Elements> 将路由器包装在 app.js 中，但它不仅不显示任何内容，而且会弄乱其他路由。

我还尝试渲染一个容器组件来代替 <CheckoutForm /> 以避免 <Link> 但同样的问题。

            <StripeProvider apiKey="pk_test_lKyP93clx4TYCo2CTdLxtMY3">
                <Elements>
                    <Link to='/checkoutForm' className='panel flex center' style={{ textDecoration: 'none' }}><button className='bold grey'>Purchase Followers</button></Link>                
                </Elements>
            </StripeProvider>

下面的代码有效，但我不想渲染 <CheckoutForm /> 我想链接到它

            <StripeProvider apiKey="pk_test_lKyP93clx4TYCo2CTdLxtMY3">
                <Elements>
                    <CheckoutForm />                  
                </Elements>
            </StripeProvider>

我在下面尝试过：

<StripeProvider apiKey="pk_test_lKyP93clx4TYCo2CTdLxtMY3">
            <Router>
                <Fragment>
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Elements >
                            <Route path="/checkoutForm" component={CheckoutForm} />
                        </Elements>
                        <Route path="/:id/edit" component={Edit} />
                        <Route path="/:id/delete" component={Delete} />
                        <Route path="/:id" component={ChirpContainer} />
                    </Switch>
                </Fragment>
            </Router>
        </StripeProvider>

编辑：在研究 Stripe 指令和这个例子 https://codesandbox.io/s/l72l6k779q 时，这几点很清楚：

• Stripe 元素有一个容器组件
• 无论容器组件在哪里渲染，它都会被<StripeProvider> 和<Elements> 包裹起来
• 容器组件用injectStripe导出

现在，我的问题是我没有以通常的方式呈现容器组件；我想通过路由器在链接中渲染它。 那么，如果容器组件在 Router Link 中，我应该在哪里以及如何用 StripeProvider 和 Elements 包装容器组件？

Answer 1

我认为这里的问题是你的嵌套是向后的。我认为StripeProvider 及其元素应该在您的CheckoutForm 组件中。比如：

<Router>
  <Link to='/checkout-form'>Check out</Link>

  <hr />

  <Route path='checkout-form' component={CheckoutForm} />  
</Router>

然后在CheckoutForm 你的渲染函数中会有这样的东西：

<StripeProvider apiKey='pk_test_lKyP93clx4TYCo2CTdLxtMY3'>
  <Elements>
    // ...your Stripe elements and other form elements
  </Elements>
</StripeProvider>

就孩子而言，应该是Router > StripeProvider > 你的表单。