javascript - Checking for a specific url ending using React Router v4 - Stack Overflow

admin管理员组

文章数量:1397158

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 acplish 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$/"} ponent={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.

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 acplish 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$/"} ponent={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.

• javascript
• url
• react-router
• react-router-v4

Share Improve this question Follow asked Aug 25, 2017 at 6:15 lukkyjoelukkyjoe 31444 silver badges1313 bronze badges 1

• Can't you reason your way out of this? I mean, you can put tons of overlay forms on any pages using javascript without the need to dish out a new URL section. I could be wrong but I have never seen any overlay that works like this, like I said, I could be wrong. – Potato Salad Commented Aug 25, 2017 at 6:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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

For example:

<Route path="/home/:pageNo*/signup" ponent={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

本文标签： javascriptChecking for a specific url ending using React Router v4Stack Overflow