React路由器 - 如何發送沒有查詢參數或Redux的道具？

Question

我想發送數據到另一個路由，但不想發送查詢參數。

我不想爲每個路由新店，我也不希望有一個店簡單地持有的所有路由/從那裏發送/消耗分別PARAMS。

是否有標準的方式來指定即將到來的路線的道具？

Answer 1

我發現反應路由器location api docs的解決方案。

this.props.router.push({ 
    pathname: '/view-user', 
    state: { userId } 
}); 

這對於插頁式獨立模式頁面似乎很好。

可能需要如果國家缺少指定一個後備，但沒有想象中的那麼遠得到。

if (!this.props.location.state) this.props.router.goBack(); 

或

const locations = this.props.location.pathname.split('/'); 
// do something 
this.props.route.push(locations.join('/')); 

Answer 2

如果沒有發送的查詢參數的信息，那麼你可以把它放在其他一些類型的商店是還可以與該路線相關聯。

您可以包裝router.push（）用自己的函數，它要傳遞下去額外的對象調用。喜歡的東西...

function navigateTo(url, extraData) { 
    if (extraData !== undefined) { 
    saveExtraDataForRoute(url, extraData); 
    } 
    router.push(url); 
} 

在反應的路由器，有與指定的函數調用路線相關的的OnEnter道具。這個函數中的代碼可以檢索額外的數據並做任何你想做的事情。

function onMyScreenEnter() { 
    const extraData = getExtraDataForRoute(url); 
    goCrazyNutsWithYourExtraData(extraData); 
} 

您會提供saveExtraDataForRoute（）和getExtraDataForRoute（）兩個函數。他們可以使用您的商店（例如Redux），設置單身對象的值或使用LocalStorage。但本質上，保存數據，因此它的檢索用URL後，你會說一樣的東西：

extraDataStore[url] = extraData; 

您不妨考慮的另一件事是使用帶有反應路由器POST方法。我沒有這樣做，也不確定它的效果如何。這裏是一個鏈接：How to Handle Post Request in Isomorphic React + React Router Application