Checking for a specific url ending using React Router v4

Question

I'm using React Router v4 and my client wants a particular feature where adding '/signup' to the end of an existing page's url would cause a signup overlay to appear that asks for a visitor's contact information. After filling out the form in the overlay, the visitor gets redirected to the contents of the original url. It is okay if a savvy visitor works around this by just removing the '/signup' URL.

My question is: how do I accomplish that? Should I even be using the path props to check the url?

One problem I foresee is that I cannot anticipate all the potential URLs and structures. I need to be able to take any arbitrary URL that could be nested to the Nth degree. Below are a cases where an overlay would appear:

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

I tried to look up to see if using regexp in the params is the solution to my problem, but I think it's not, since the regex seems to only check a specific param in question, and does not solve the initially discussed problem of an arbitrary number of forward slashes in the URL (i.e. paths nested by varying degree). See below:

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

I'm pretty confused. So would appreciate guidance not only on a technical solution but how to think about problem/requirement. I am also open to modifying the implementation somewhat. For example, I'd be amenable to maybe using '?signup=true' instead of '/signup'. But the requirement that the thing should be placed at the end of the URL remains the same.

Answer 1

You can use :params*. It means zero or more.

For example:

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

It will match these paths:

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