访问React中ConfirmOrder组件时OrderDetails为何先渲染？

问题场景 #

当前使用的路由配置如下：

<ProtectedRoute exact path="/orders" Component={MyOrders} />
<ProtectedRoute exact path="/order/:id" Component={OrderDetails} />
<ProtectedRoute exact path="/order/confirm" Component={ConfirmOrder} />

访问/order/confirm路由时，OrderDetails组件会被优先渲染；注释掉/order/:id的路由配置后，ConfirmOrder组件能正常显示。

问题原因 #

路由匹配是从上到下按顺序进行的，动态路由/order/:id会把confirm识别为:id的参数值，因此会先匹配到这条路由，跳过后续的/order/confirm静态路由。

解决方案 #

将静态路由放在动态路由的前面，调整后的路由配置如下：

<ProtectedRoute exact path="/orders" Component={MyOrders} />
<ProtectedRoute exact path="/order/confirm" Component={ConfirmOrder} />
<ProtectedRoute exact path="/order/:id" Component={OrderDetails} />

这样访问/order/confirm时，会优先匹配到对应的静态路由，不会被动态路由拦截。

内容的提问来源于stack exchange，提问作者abhay