我正在使用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” 在 url 中,会显示“验证组件”,当他输入“http://localhost:3000/abc/publicLoginID.do?phase=ghi” 在 url 中,显示“ImageComponent”。
我确实在这里检查了一些案例:反应路由器匹配查询字符串 and 反应路由器中的查询字符串,但无法弄清楚如何使其发挥作用。
您可以编写一个包装器组件,它将根据查询参数切换要渲染的内容
<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}/>}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)