陣營路由器4-1 /路徑對正則表達式多個可選部分

在陣營路由器3我能有這樣的路徑：陣營路由器4-1 /路徑對正則表達式多個可選部分

/root(/id/:id)(/di/:di)

這將匹配

/root 
/root/id/1 
/root/di/2 
/root/id/1/di/2

完美。

我無法弄清楚如何在React Router 4中做到這一點。所有的例子都只做一件事。

使用Express Route tester我能拿出像

/root/id/:id?/di/:di?

不過的路線，將只匹配

/root/id/1/di/2

是否有一個解決方案？

來源

2017-07-06 firedev

在反應路由器v4中，您可以將您的正則表達式包含在()之內。所以這個正則表達式應該可以工作，並且匹配所有的路徑：。在您提供鏈接的Express路由器測試工具中，鍵值wo nt與此正則表達式一起顯示，但它確實有效，我在本地主機上進行了測試，並且按鍵工作得很好。

請注意，在第一個捕獲組後，我沒有使用?，即(/id/|/di/)，因爲如果我這樣做了，那麼它將變爲可選，然後像/root/12這樣的路徑也會匹配。

來源

2017-07-06 10:55:46 Zeus

能否請您詳細說明如何工作的呢？我需要轉換此路徑「實體（（/：contextId）（/：contextRelType）/活動（/：activeId）（/：activeRelType））」 –

@SergeyOrlov ReactRouter v4使用path-to-regexp匹配路徑，您可以查看https://github.com/pillarjs/path-to-regexp#parameter-modifiers查看與之相關的示例。我的例子的目的是匹配原始問題中給出的所有情況。方括號'（）'中的URL部分基本上是正則表達式，例如'/ hey（/ jerry |/tom）'將匹配'/ hey/tom'和'/ hey/jerry'這兩個路徑，而'？'在它使它可選之後。 – Zeus

這是我到底是怎麼做的，這是一個豆蔻有點可笑，但它的工作原理：

<Route 
    path="/root/:firstKey?/:firstId?/:secondKey?/:secondId?" 
    render={({ match: { params: { firstKey, secondKey, firstId, secondId } } }) => { 
     const params = { [firstKey]: firstId, [secondKey]: secondId } 
     return (<Whatever {...params} />) 
    }} 
    />

來源

2017-07-06 12:09:42 firedev

陣營路由器4-1 /路徑對正則表達式多個可選部分

回答

相關問題