查询字符串反应路由器路径 [英] query string react-router path

问题描述

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

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>

我知道这不是在Route"中指定查询字符串 (?) 的正确方法.我如何确保每当用户输入http://localhost:3000/abc/publicLoginID.do?phase=def"，VerifyComponent"出现，当他输入http://localhost:3000/abc/publicLoginID.do?phase=ghi"，出现ImageComponent".

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.

我确实在这里检查了一些情况:react-router 匹配查询字符串 和 react-router 中的查询字符串，但无法弄清楚如何使其工作.

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

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

这篇关于查询字符串反应路由器路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！