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

Question

我正在使用 React Router v4，我的客户想要一个特定的功能，在现有页面的 url 末尾添加“/signup”会导致出现一个注册覆盖，要求提供访问者的联系信息。在覆盖层中填写表单后，访问者将被重定向到原始 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 />
  )}> 

我试图查看在 params 中使用 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