使用 React Router v4 检查特定的 url 结尾

Question

我正在使用 React Router v4，我的客户想要一个特殊的功能，即在现有页面的末尾添加“/signup”url 会导致出现一个注册叠加层，要求访问者联系信息。在叠加层中填写表格后，访问者将被重定向到原始 url 的内容。 没问题 如果精明的访问者通过删除'/signup' URL 解决这个问题。

我的问题是：我该如何做到这一点？我什至应该使用路径道具来检查 url 吗？

我预见到的一个问题是我无法预见所有潜在的 URL 和结构。我需要能够采用任意 URL 可以嵌套到第 N 度。以下是出现叠加层的情况：

  <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 />
  )}>

我试图查看在参数中使用正则表达式是否可以解决我的问题，但我认为不是，因为正则表达式似乎只检查有问题的特定参数，并没有解决最初的问题讨论了 URL 中任意数量的正斜杠的问题（即不同程度嵌套的路径）。见下文：

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

我很困惑。因此，不仅要感谢有关技术解决方案的指导，还要感谢如何思考 problem/requirement。我也愿意稍微修改实现。例如，我可能会使用“?signup=true”而不是“/signup”。但是东西应该放在 URL 的 end 的要求保持不变。

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

使用 React Router v4 检查特定的 url 结尾

Checking for a specific url ending using React Router v4

javascript

url

react-router

react-router-v4