Javascript 当用户直接点击需要其他组件id的url时，React中的路由问题

我在react中遇到了与路由相关的问题。 屏幕上有一个按钮，仅当用户通过身份验证时才会出现，因此它是一条私人路线“/主页/优惠券”

当用户点击任何优惠券时，我指示用户

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

使用这个props.history：

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

           })

我在我的App.js中对此进行了路由：

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

组件CouponsReceive需要来自组件的id，当用户点击

/home/coupons

时，该组件会指引用户

我担心的是，如果用户直接点击路线

/coups

，而没有导航到

/home/coups

，整个web应用程序就会中断，因为我们在这个.props.location中没有得到任何东西

我如何确保这些事情不会发生

我的路线是否正确

欢迎提出任何建议。 如果它缺少信息，我将添加更多的代码片段。

---

我使用的是react路由器。

查看您的实现，我假设您使用的是react路由器还是reach路由器

如果是这样，根据我的经验，我倾向于使用路由道具来指定应该使用的ID

我通常会为索引设置一个路由，为显示对象设置一个路由，为不匹配设置一个默认路由（像404一样），如下所示：

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

指定“精确”属性可确保它仅在路径正确匹配时渲染该组件，因此如果不需要索引路由，可以完全忽略它，当导航到该路径时，它将返回到NoMatch组件

我提供的示例将改变它在地址栏中的外观，以获得更为RESTful的外观，因此

是的

在show component中，您可以使用路由器提供的道具，通过在show component中的冒号“：id”后指定的名称访问道具值，如下所示：

设{id}=this.props.match.params

---

我希望这对你有所帮助。你的问题的解决方法很简单。由于history.location.search没有任何内容，当用户没有从

主页/优惠券

导航到

优惠券

时，您可以使用默认值，或者您可以将路由重新配置为使用Router param where in，而不是查询指定您的路由，如

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

---

或者，如果未收到优惠券，您可以将用户重定向到

主页/优惠券

路由

我正在使用react路由器

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