React Router中匹配含连字符的路由问题求解

这个场景我太熟悉了！原路由的问题在于，默认的参数匹配逻辑会把第一个连字符后的所有内容都归为countryId，导致你的多连字符slug被错误拆分。不用改动现有的slug生成规则，我们可以通过React Router的正则参数约束来精准匹配最后一个连字符后的ID。

修改后的路由配置 #

直接给countryId参数添加正则匹配规则，限定它只能匹配数字：

<Route path="/country/:countrySlug-:countryId(\\d+)" component={CountryPage} />

为什么这样有效？ #

• React Router支持通过(regex)语法为路由参数添加匹配约束，这里的\\d+表示匹配1个或多个数字。
• 路由会从右往左优先匹配：它会自动识别URL中最后一个连字符后面的数字部分作为countryId，而前面的所有内容（包括中间的连字符）都会被完整捕获为countrySlug。

验证效果 #

在CountryPage组件中，你可以通过match.params拿到正确的参数：

• match.params.countrySlug → bosnia-and-herzegovina（用于展示的完整slug）
• match.params.countryId → 644（用于内容加载的ID）

完全满足你“不修改slug格式，仅提取最后一个连字符后参数”的需求！

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