React路由器，以編程方式導航時傳遞數據？

this.props.router.push('/some/path')

有沒有辦法送導航時沿PARAMS（對象）導航到不同的路徑？

我能想到的其他選項，但想知道如果通過object是可能的嗎？

2017-02-11 eugene

陣營路由器使用location對象。 location對象的其中一個屬性是state。

this.props.router.push({ 
    pathname: '/other-page', 
    state: { 
    id: 7, 
    color: 'green' 
    } 
})

在被導航到，當前location的頁面將被注入到其路線匹配組件，因此您可以訪問使用this.props.location.state的狀態。

有一點需要記住的是，如果用戶直接導航到頁面，將不會有state，所以當數據不存在時您仍然需要一些機制來加載數據。

2017-02-11 18:33:29

中應該提及版本號您是否得到過任何解決方案**請注意，有一點需要注意的是，如果用戶直接瀏覽頁面，則不會有任何狀態，因此您仍然需要一些機制在不存在數據時加載數據。** – Anil

對用戶直接導航到路由和狀態時如何正常處理場景也沒有定義。理想情況下，它會呈現加載組件，然後只有當數據可用時纔會將它作爲道具傳遞給組件，以便組件行爲始終可以假定所需狀態在其需要時存在 –

@MattMazzola我不確定是否存在「優雅「的方式，但我只是有默認的道具，並使用'componentWillMount'或'componentDidMount'來獲取數據。如果可能，我已經不再使用'location.state'了。 –

傳遞查詢參數時，在編程導航反應路由器

歷史對象可以通過編程方式使用history.push和history.replace來更改當前位置。

history.push('/home?the=query', { some: 'state' })

如果我們將歷史對象作爲道具傳遞給組件。然後，我們可以使用歷史對象上提供的反應路由器方法以編程方式導航。

現在讓我們假設您將歷史對象作爲道具稱爲「路由器」。因此，這將一個組件內引用基於類的語法，如：

this.props.router

當使用推或更換您可以同時指定URL路徑和狀態作爲單獨的參數或包括在單個位置狀物品應有盡有第一個參數。

this.props.router.push('/some/path?the=query')

或者您可以使用一個類似位置的對象來指定URL和狀態。這相當於上面的例子。

this.props.router.push({ 
    pathname: '/some/path', //path 
    search: '?the=query' // query param named 'search' 
})

注 - 當然，請確保this.props.router實際上是從反應路由器API歷史記錄對象。

2017-02-11 09:18:33 therewillbecode

我不知道你使用的是哪個版本，但是你能爲react-router給對象作爲參數：

let {router} = this.props; 
router.push({pathname: "/newpath", query: {id: 1}) // will create the url /newpath?id=1

2017-02-11 09:46:26 cubbuk

在答案 – Sgnl

回答