将道具传递给新的 URL/路由答案

【问题标题】：React Passing props to new URL/route将道具传递给新的 URL/路由
【发布时间】：2019-06-30 22:45:24
【问题描述】：

我对 React 还很陌生，不知道如何做一些相当简单的事情（我假设）。我想将道具传递给从图表元素（它必须是这个元素）单击的新 URL。

我在页面上有一个图表，我已为其分配了点击事件。

 <div id='plotlyContainer' className='dashboard-border-container'>
        { 
          toDrilldown &&
          <Redirect to={{
              pathname: '/portfolio/drilldown',
              state: {
                filters: this.props.filters,
                category: this.props.category,
                chartType: this.props.chartType
              }
            }}
          />
        }
        <Plot
          data={this.props.data}
          layout={this.props.layout}
          useResizeHandler={true}
          style={{width: '100%', height: '100%'}}
          onClick={this.navigateToDrillDownPage.bind(this)}
        />
      </div>

点击事件：

navigateToDrillDownPage() {
    this.setState({toDrilldown: true})
 }

如何将过滤器、类别和图表类型道具传递给新 URL (drillDownURL)？

【问题讨论】：

你在用react-router吗？
@cubrr 我们正在使用 react-router-dom
在这种情况下你不想使用window.location，而是使用React Router的重定向方法，它允许你通过state传递数据。有关示例，请参见其文档：reacttraining.com/react-router/web/example/auth-workflow

标签： reactjs url routes

【解决方案1】：

我找到了解决方案，所以我认为它可能对其他人有所帮助。重定向状态对象是未定义的，直到我将组件包装在 (portfolio/drilldown) 中：

export default withRouter(PortDrillDownContainer)

包装后，被反对的状态具有我预期的所有值。

【讨论】：