单击按钮即可用prop反应渲染组件

Question

我希望用户能够单击“购买”按钮，这将重定向到结帐组件（转到新页面并显示结帐组件）。当用户单击“购买”按钮时，如何显示Checkout组件？

结帐组件还需要一个道具（商品价格）。我该怎么做：点击按钮后？

按钮代码：

                       <Button
                        className={classes.root} 
                        variant="contained"  
                        color="primary"
                        disabled={loading}
                        >
                          Buy Coupon
                        </Button>

我的Checkout组件收取价格/金额：

const CheckoutForm = ({ price }) ....

这是在正确的轨道上吗？ ：

<Route exact path="/checkout" render={(props) => <Checkout {...props}/>}/>