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
– Umang Gupta, Commented Feb 8, 2017 at 21:29

Umang Gupta · Accepted Answer · 2017-02-08 21:33:48Z

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 8, 2017 at 21:33

Umang Gupta

16.6k7 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

abhi Over a year ago

Thanks @UG_, it worked. My only concern is, if we have a router like this

<Router history={browserHistory}>          <Route path="abc/login.do?phase=jkl" component={RandomComponent}/> <Route path="abc/login.do?phase=mno" 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>

Will we need 2 wrapper components, one for login.do and another for publicLoginID.do ?

Umang Gupta Over a year ago

yes, ideally I would want to handle two routes separately.

Umang Gupta Over a year ago

You can also put all of it in one component and switch based on routes, but that defeats the purpose of using react-router

Collectives™ on Stack Overflow

query string react-router path

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related