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 Umang Gupta · Accepted Answer · 2017-02-08T21:33:48

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

query string react-router path

1 Answers