query string react-router path

Question

I am using react-router 3.0.2 and trying to configure router path with query string. This is how I have configured my router:

<Router history={browserHistory}>
                <Route path="abc/login.do" component={LoginComponent}/>
                <Route path="abc/publicLoginID.do?phase=def" component={VerifyComponent} />
                <Route path="abc/publicLoginID.do?phase=ghi" component={ImageComponent}/>
                <Route path="*" component={LoginComponent}/>
</Router>

I understand this is not the right way to specify query string (?) in "Route". How do I make sure that whenever a user enters "http://localhost:3000/abc/publicLoginID.do?phase=def" in the url, "VerifyComponent" shows up, and when he enters "http://localhost:3000/abc/publicLoginID.do?phase=ghi" in the url, "ImageComponent" shows up.

I did check some cases here: react-router match query string and Querystring in react-router, but unable to figure out how to make it work.

You can write a wrapper component, that will switch what to render based on the query parameter — Umang Gupta, Feb 08 '17 at 21:29

score 8 · Accepted Answer · answered Feb 08 '17 at 21:33

8

You can write a wrapper component, that will switch what to render based on the query parameter

<Router history={browserHistory}>
   <Route path="abc/login.do" component={LoginComponent}/>
   <Route path="abc/publicLoginID.do" component={WrapperComponent} />
   <Route path="*" component={LoginComponent}/>
</Router>

//WrapperComponent

WrapperComponent = (props) => {
   if (props.location.query.phase==="def"){return <VerifyComponent {...props}/>}
   if (props.location.query.phase==="ghi"){return <ImageComponent {...props}/>}
}

answered Feb 08 '17 at 21:33

Umang Gupta

15,022
6
48
66

Thanks @UG_, it worked. My only concern is, if we have a router like this ` ` Will we need 2 wrapper components, one for login.do and another for publicLoginID.do ? – abhi Feb 09 '17 at 01:38
yes, ideally I would want to handle two routes separately. – Umang Gupta Feb 09 '17 at 03:48
1

You can also put all of it in one component and switch based on routes, but that defeats the purpose of using react-router – Umang Gupta Feb 09 '17 at 03:48

query string react-router path

1 Answers1

Linked