反应组件重定向与已经有另一个 onClick 的表行的 onClick 重定向

Question

我有一个表行已经有一个onClick，用于将数据发送到api以呈现新内容。目前，我将该 api 呈现到登录页面。但是，我希望将数据呈现到单独的页面/路径。

我是否要使用重定向、链接、另一个点击等。只是对从哪里开始和使用的最佳方法感到困惑。

const SearchResults = props => (
     <tbody>
{ props.contracts.map((contract, i) => 
    <tr key={i} data-id={contract.Id}  
        onClick={() => props.handleContract(contract.Fields.filter(field => field.DataField==="IDXT001").map(field => field.DataValue))} 
        >{contract.Fields.map( docs =>  
        <td key={docs.Id}><span id={docs.DataField}>{docs.DataValue}</span></td>)}
    </tr> )}
      </tbody>
   )

这是我的主要课程页面。我希望 PDF 加载到新页面上。

      <SearchResults 
    labels={this.state.labels}
    contracts={this.state.contracts} 
    pdfs={this.state.pdfs}
    handleContract={this.onClick}
    />
  <Pdfs 
    labels={this.state.labels}
    contracts={this.state.contracts} 
    pdfs={this.state.pdfs}
    />

这是我的应用程序.js

    class App extends Component {
  render() {
    return (
      <div className="App">
      <BrowserRouter>
      <div>
        <Header />
        <Route exact path="/" component={Search} />
        <Route path="/pdfs" component={Pdf} />
        <Footer />
        </div>
        </BrowserRouter>
      </div>
    );
  }
}

Answer 1

在您的方法中，您可以使用：

this.props.history.push({
  pathname: '/yourpath',
  state: { labels={this.state.labels}
    contracts={this.state.contracts} 
    pdfs={this.state.pdfs} }
})

Answer 2

您可以修改onClick函数，以根据您在路由器历史记录中的位置对您需要去的位置进行一些计算