使用React Router v4檢查特定的URL結尾

Question

我正在使用React Router v4，我的客戶想要一個特殊的功能，即在現有頁面的URL末尾添加“ / signup”會導致出現一個注冊疊加層，要求提供訪問者的聯系信息。 在覆蓋層中填寫表單后，訪問者將被重定向到原始URL的內容。 它是好的 ，如果一個精明的游客解決了這個問題由剛剛去掉“/注冊”網址。

我的問題是：我該怎么做到？ 我是否應該甚至使用路徑道具來檢查網址？

我預見的一個問題是，我無法預見所有潛在的URL和結構。 我需要能夠接受可以嵌套到第N個度的任意URL。 以下是出現疊加層的情況：

  <Route path="/home/signup" render={({match}) => (
    <SomeOverlayForm />
  )}> 

  <Route path="/home/xx/signup" render={({match}) => (
    <SomeOverlayForm />
  )}> 

  <Route path="/home/xx/yy/signup" render={({match}) => (
    <SomeOverlayForm />
  )}> 

  <Route path="/other/signup" render={({match}) => (
    <SomeOverlayForm />
  )}> 

我試圖查看是否在參數中使用regexp是解決我的問題的方法，但我認為不是，因為regex似乎僅檢查有問題的特定參數，而不能解決最初討論的任意問題。 URL中的正斜杠數（即，路徑嵌套程度不同）。 見下文：

<Route path="home/:someParam(/\/signup$/"} component={UserProfilePage} />

我很困惑。 因此，不僅要對技術解決方案提供指導，而且還要考慮問題/要求，因此將不勝感激。 我也願意對實現進行一些修改。 例如，我可能會使用'？signup = true'而不是'/ signup'。 但是將事物放置在URL 末尾的要求保持不變。

Answer 1

您可以使用:params* 。 這意味着zero or more 。

例如：

<Route path="/home/:pageNo*/signup" component={Overlay} />

它將匹配以下路徑：

// match.params.pageNo contains ""
/home/signup

// match.params.pageNo contains "1"
/home/1/signup

// match.params.pageNo contains "1/2"
/home/1/2/signup

// match.params.pageNo contains "1/2/3"
/home/1/2/3/signup