从查询字符串重定向到路径

我目前正在更新使用查询参数作为“路径”的遗留应用程序前端的过程。（例如：?greeting=hello而不是/greeting/hello）从查询字符串重定向到路径

但是，我们希望转移到基于路径的路由，并从传统查询结构重定向。

较佳我会一直喜欢做这样的事情：

<Redirect from="?gameid=:game" to="/game/:game" />

然而，它似乎并不真的如此简单，因为反应路由器不提供查询参数的支持（#209 ）。

解决此问题的最简洁方法是什么？

与普通JS的URL操作已经被证明是非常容易与反应结合的错误。

来源

2016-03-04 octagonal

您可以尝试检查componentDidMount中的this.props.location.query，并在那里进行重定向，例如， 'if（this.props.location.query.gameid）' – mrkre

或者，您可以查看路由的onEnter方法，该方法允许访问nextState.location.query参数，并使用replace方法进行导航。 – mrkre

原来我的情况是一个相当有边缘的情况，因此无法通过react-router很好地处理。

由于应用程序使用基于散列的历史（/#/path），查询参数就是不能，如果他们不通过onEnter的nextState哈希之前逮住。

我最终做的是处理IndexRouter内部的任何可能的查询。

<IndexRoute component={LoginPage} 
    onEnter={ 
    (nextState, replaceWith) => { 
     console.log(nextState); 
     var obj = qs.parse(document.location.search.split("").slice(1,document.location.search.split("").length).join("")); 
     if(obj.gameid){ 
     document.location.href = document.location.origin + document.location.pathname + "#/game/" + obj.gameid; 
     } 
    } 
    } 
/>

这种方式似乎最好把路由逻辑内的容器应用程序的componentDidMount因为路由逻辑Route内部实际上属于。它还确保所有后续调用将正确处理。

向/ u/mrkre表示感谢，向onEnter指示我。

来源

2016-03-07 16:18:51 octagonal

从查询字符串重定向到路径

回答

相关问题