通过 react-router 处理带有斜线的路径的方法是什么？答案

【问题标题】：What's the way to handle paths with slash via react-router?通过 react-router 处理带有斜线的路径的方法是什么？
【发布时间】：2020-01-20 04:47:51
【问题描述】：

我在使用 react-router 进行动态路由时遇到问题。我的示例路径如下所示：

/contacts/C/BG-DPC-063

这是我的路线：

<Route path='/contacts/:contactId' component={Contacts}/>

所以当我试图处理我的比赛时：

const {
    params: { contactId }
} = match;

由于斜线，contactId 只是“C”。我该如何处理？这是来自 API 的 ID，所以我无法更改。

【问题讨论】：

【解决方案1】：

这完全取决于 URL 的哪些部分是动态的？如果“C”不是动态的

<Route path='/contacts/C/:contactId' component={Contacts}/>

否则

<Route path='/contacts/:apiID/:contactID' component={Contacts}/>

如果是第二个示例，请务必处理不存在的 appID 和/或 contactID 情况，因为用户可以在 URL 中输入任何对 :appID 和/或 :contactID 有效/无效的内容（如果它无效，将他重定向到其他页面或显示一些消息）。

【讨论】：

【解决方案2】：

你为什么不使用：

<Route path='/contacts/:contactPrefix/:contactSuffix' component={Contacts}/>

那你稍后合并它们？

【讨论】：