查询字符串反应路由器路径

Question

我正在使用 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”中指定查询字符串 (?) 的正确方法。我如何确保每当用户在 url 中输入“ http://localhost:3000/abc/publicLoginID.do?phase=def ”时，“VerifyComponent”就会出现，当他输入“ http://localhost: 3000/abc/publicLoginID.do?phase=ghi " 在 url 中，"ImageComponent" 出现了。

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

Answer 1

您可以编写一个包装组件，它将根据查询参数切换要呈现的内容

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