javascript - 当用户直接点击需要来自另一个组件的 id 的 url 时，React 中的路由问题

Question

我在与路由相关的 react 中遇到了这个问题。屏幕上会出现这个按钮，只有在用户通过身份验证后才会出现，因此它是私有(private)路线“/home/coupons”。

当用户点击任何优惠券时，我将用户引导至

http://localhost:3000/coupons?id=6

使用这个 props.history:

        this.props.history.push({
                 pathname: '/coupons',
                 search: '?id='+id,

           })

我在我的 App.js 中为此做了路由:

<Route path="/coupons" component={CouponsRedeem}/>

组件 CouponsRedeem 需要用户点击 /home/coupons 时获得定向的组件的 ID。

我担心的是，如果用户直接点击路由 /coupons 而没有导航到 /home/coupons，整个网络应用程序就会崩溃，因为我们没有得到任何 get this.props.location 中的任何内容。

我如何确保此类事情不会发生？

我的路由是否正确完成？

欢迎提出任何建议。如果缺少信息，我会添加更多代码片段。我正在使用 react 路由器。

Answer 1

您的问题的解决方案非常简单。您有一个默认值，当用户没有从 home/coupons 导航到 coupons 时使用，因为 history.location.search 没有任何内容，或者您​​重新配置你的路线使用路由器参数，而不是查询你指定你的路线，如

<Route
   exact
   path="/coupons/:id"
   component={Coupon.Show}
/>

像这样使用它

 this.props.history.push({
      pathname: `/coupons/${id}`,
 })

否则，如果没有收到优惠券，您可以将用户重定向到 home/coupons 路径