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 (ie 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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.