如何在React Router中配置匹配以.和@开头的URL路由？

可以在React Router中配置匹配以.和@开头的URL路由，但你当前的配置存在潜在问题，需要调整才能确保正确匹配目标路径。

现有配置的问题 #

你当前的路由配置：

export default [
    route('.:param', "routes/dotroute.tsx"),
    route('@:param', "routes/atroute.tsx")
]

如果你的route函数是基于React Router的路径模板创建的，这个写法会将路径中的.或@与参数分离：

• 对于/.category-name，param会被解析为category-name（而非完整的.category-name）
• 对于/@john.doe，param会被解析为john.doe（而非完整的@john.doe）

如果这符合你的业务需求，该配置可以匹配目标路径；但如果需要将整个.category-name或@john.doe作为参数值，或者要避免路由误匹配其他路径，就需要调整配置。

更严谨的配置方案 #

如果需要精确匹配以.或@开头的单段路径，建议给路径参数添加正则约束，确保只有符合规则的路径才会被匹配：

export default [
    // 匹配以.开头的根路径，param包含完整的".category-name"
    route('/:param(\\..+)', "routes/dotroute.tsx"),
    // 匹配以@开头的根路径，param包含完整的"@john.doe"
    route('/:param(@.+)', "routes/atroute.tsx")
]

• \\..+是正则表达式：\\.匹配字面量.，+表示后面至少有一个字符，避免匹配单纯的/.路径
• @.+匹配以@开头的任意非空字符串，避免匹配单纯的/@路径

额外注意事项 #

• 服务器配置：生产环境部署时，需配置服务器将所有路由请求转发到React应用的入口文件（如index.html），避免带.的路径被服务器当作静态文件处理。
• 路由顺序：如果有其他根路径路由（如/home），需将这两个特殊路由放在前面，否则会被其他路由优先匹配。

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