通過 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和/或contactID案例，因為用戶可以在 URL 中為:appID和/或:contactID輸入任何有效/無效的內容（如果無效，將他重定向到其他頁面或顯示一些消息）。