從查詢字符串重定向到路徑

我目前正在更新使用查詢參數作爲「路徑」的遺留應用程序前端的過程。（例如：?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

從查詢字符串重定向到路徑

回答

相關問題