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

Question

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

/contacts/C/BG-DPC-063

这是我的路线：

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

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

const {
    params: { contactId }
} = match;

contactId 只是 'C' 因为斜杠。我该如何处理？这是来自 API 的 ID，因此我无法更改它。

Answer 1

你为什么不使用：

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

那你稍后合并它们？

Answer 2

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

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

否则

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

如果是第二个示例，请务必处理不存在的 appID and/or contactID 案例，因为用户可以为 [=14= 输入任何内容 valid/invalid ] and/or :contactID in URL（如果无效，将他重定向到其他页面或显示一些消息）。

What's the way to handle paths with slash via react-router?