如何通过反应路由器将数据从一个容器传递到另一个容器

我使用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

如何通过反应路由器将数据从一个容器传递到另一个容器

回答

相关问题