react-location无斜杠参数路由实现方式及写法规范咨询

1. react-location 是否支持实现 /p:productId 形式的无斜杠参数路由匹配效果 #

支持，完全不需要拆分嵌套子路由。react-location 原生支持静态路径片段和动态参数直接拼接，不用斜杠分隔，直接在路径配置项里写p:productId就能达到和 react-router-dom 一致的匹配效果，配置参考：

const routes = [
  {
    path: 'p:productId',
    element: <Products />
    // 匹配规则：访问 localhost:3000/p1、localhost:3000/p999 都会命中该路由，参数productId会自动解析为'1'、'999'
  }
]

如果需要限制参数格式，比如要求 productId 必须是纯数字，还可以直接在参数后追加正则校验，写法为p:productId(\\d+)，这样就不会误匹配到pabc这类不符合规则的路径。

2. 固定路径与参数直接拼接、无斜杠分隔的路由写法是否属于不良实践 #

不算不良实践，属于URL设计里的常规可选方案，按需选用即可：

• 这种写法完全符合URL规范，很多成熟产品都在使用，最常见的就是短链接、内容详情页场景：不少电商、内容平台会用/p12345这类短路径对应商品/帖子详情，比斜杠分隔的/p/12345路径更短，用户输入、分享传播都更方便。
• 唯一需要注意的是路由匹配优先级问题：如果同时存在/p:productId和/post这类以p开头的静态路径，一定要把静态路径的匹配优先级放得更高，避免静态路径被动态参数路由误拦截，把ost识别成productId的参数值。
• 如果没有短路径的强需求，斜杠分隔的/p/:productId可读性会稍好，路由冲突的概率也更低，两种写法没有绝对的优劣，匹配业务场景就可以。

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