Question

我正在使用react-router-v4，react-bootstrap，react-router-bootstrap创建一个应用程序，所以我点击了一个<LinkContainer to="/mix" className="btn btn-danger"> <input type="button" value="Mix"/> </LinkContainer>我转到新页面，但我想要一些来自现有页面到新页面。最好的方法是什么？我无法传递网址中的每个数据。

这是重定向页面的按钮

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

在这个组件中我有一年，一些数据要使用。我应该如何将这些数据传递给我在索引中定义的下一个容器js

to={{state:}}

编辑1：

添加一些解释：一旦导航，它就会在UI上填充一些数据。在此之前，我的Reducer已经处理了这些数据。此处理是基于我通过{{1}}的数据完成的，那么如何在我的新页面缩减器中访问此数据

编辑2：这是我的plunker

Answer 1

您可以尝试使用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)

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

1 个答案: