查询字符串react-router路径

时间:2017-02-08 21:15:02

标签: reactjs react-router query-string

我正在使用react-router 3.0.2并尝试使用查询字符串配置路由器路径。这就是我配置路由器的方式:

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

我知道这不是在“Route”中指定查询字符串(?)的正确方法。如何确保每当用户在网址中输入“http://localhost:3000/abc/publicLoginID.do?phase=def”时,会显示“VerifyComponent”,当他在网址中输入“http://localhost:3000/abc/publicLoginID.do?phase=ghi”时,“ImageComponent”会显示。

我在这里检查了一些案例:react-router match query stringQuerystring in react-router,但无法弄清楚如何使其发挥作用。

1 个答案:

答案 0 :(得分:4)

您可以编写一个包装器组件,它将根据查询参数

切换要呈现的内容
<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}/>}
}