React调用/api/products/featuredProducts被误识别为productId参数报错如何解决

这个报错是后端路由匹配顺序错误导致的：
后端使用的Express/Koa等HTTP框架会按路由定义的先后顺序匹配请求，你先定义了/api/products/:productId动态参数路由，后定义了/api/products/featuredProducts静态路由。当请求/api/products/featuredProducts到达后端时，会优先匹配到靠前的动态路由，把路径中的featuredProducts识别为productId参数的值，后续接口逻辑尝试将这个字符串转换为MongoDB的ObjectId时格式不匹配，就抛出了CastError。
其他同层级子接口可以正常运行，是因为那些接口的定义顺序在动态参数路由之前，没有被拦截。

你可以根据自己的项目情况任选以下方案：

• 调整后端路由定义顺序
  把所有/api/products/开头的静态路由全部放在动态参数路由/api/products/:productId的前面，优先匹配静态路由。
  Express框架的示例：

  // 先定义静态路由
  app.get('/api/products/featuredProducts', (req, res) => {
    // 精选商品接口逻辑
  })
  // 后定义动态参数路由
  app.get('/api/products/:productId', (req, res) => {
    // 单商品详情接口逻辑
  })
  

• 给动态路由加参数格式校验
  给productId参数增加MongoDB ObjectId的格式匹配规则，只有参数符合24位十六进制的格式时才会匹配该动态路由，从规则上避免静态路径被误识别：

  // 仅当productId符合ObjectId格式时才匹配该路由
  app.get('/api/products/:productId([a-fA-F0-9]{24})', (req, res) => {
    // 单商品详情接口逻辑
  })
  

• 拆分接口路径层级
  直接修改两类接口的路径规则，从根源上避免冲突，比如把单商品详情接口调整为/api/products/detail/:productId，和/api/products/featuredProducts从路径层级上区分开。

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