Abfrage String React-Router Pfad

Question

Ich benutze React-Router 3.0.2 und versuchen, Router-Pfad mit Abfrage-String zu konfigurieren. Dies ist, wie ich meinen Router konfiguriert haben:

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

Ich verstehe das nicht der richtige Weg ist, Query-String angeben, in „Route“ (?). Wie stelle ich sicher, dass, wenn ein Benutzer "http://localhost:3000/abc/publicLoginID.do?phase=def" in der URL eingibt, "VerifyComponent" angezeigt wird, und wenn er "http://localhost:3000/abc/publicLoginID.do?phase=ghi" in der URL eingibt, wird "ImageComponent" angezeigt.

Ich habe einige Fälle hier überprüft: react-router match query string und Querystring in react-router, aber nicht in der Lage, herauszufinden, wie es funktioniert.

Answer 1

Sie können eine Wrapper-Komponente schreiben, die schaltet, was auf der Grundlage der Abfrageparameter machen

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