如何通過反應路由器將數據從一個容器傳遞到另一個容器

我使用react-router-v4，react-bootstrap，react-router-bootstrap創建一個應用程序，所以我有一個LinkContainer點擊我去新頁面，但我想從現有頁面的一些數據到新頁面。什麼是最好的方式來做到這一點？我無法通過網址傳遞每個數據。如何通過反應路由器將數據從一個容器傳遞到另一個容器

這裏是誰在這部分我有一年的頁面

<LinkContainer to="/mix" className="btn btn-danger"> 
    <input type="button" value="Mix"/>  
</LinkContainer>

重定向按鈕，一些數據使用。我如何把這個數據傳遞到我這在我的索引中定義一個容器，JS

<BrowserRouter> 
    <div> 
     <HeaderContainer/> 
     <Route path="/mix" component={mixContainer}/> 
    </div> 
</BrowserRouter>

編輯1：

增加了一些解釋：一旦導航它填充在UI的一些數據。在此之前，這些數據已經在我的減速器中處理過了。這個處理是基於我通過to={{state:}}數據我怎麼能在我的新的一頁的減速訪問這些數據做

編輯2：這裏是我的plunker

來源

2017-08-16 LowCool

爲什麼不使用終極版商店嗎？ –

我正在使用它，但是如何通過路由器傳遞所有我想要的數據？我爲這2個數據使用了2個不同的減速器 – LowCool

我不確定「通過路由器」是什麼意思。但是，即使您更改路線，減速機也會保留其商店。因此，在您的新頁面容器中，您可以訂閱最後一頁的redux商店的商店，您將獲得最後一頁的數據。 –

你可以嘗試使用state嵌套屬性爲Link組件：

<LinkContainer 
    to={{ 
    pathname: '/mix', 
    state: { /* data you want to pass */ } 
    }} 
/>

，然後在路線組件：

// for example: 
componentWillMount() { 
    this.locationState = this.props.location.state 
}

另一種方式是使用redux來存儲和檢索數據。爲了取回數據存儲到你的組件，你可以使用connect功能從react-redux庫：

import {connect} from 'react-redux' 
... 

class MyComponent extends React.Component { 
    static propTypes = { 
    myProperty: PropTypes.any 
    } 

    ... 
} 

function mapStateToProps(state) { 
    return { 
    myProperty: state.myReducer.someProp 
    } 
} 

export default connect(mapStateToProps)(MyComponent)

來源

2017-08-16 08:19:11 GProst

@GPorst：這有幫助。但如果我想在我的新reducer中訪問這些數據，我該如何訪問？ – LowCool

** new ** redurs是什麼意思？你能提供一些例子嗎？ – GProst

我已經添加了一些解釋，請讓我知道，如果它是有意義的 – LowCool

如何通過反應路由器將數據從一個容器傳遞到另一個容器

回答

相關問題