Question

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

我是否要使用重定向，链接，其他onClick等。只是对从何处开始和最佳使用方法感到困惑。

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>
   )

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

      <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}
    />

这是我的App.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函数，以根据路由器历史记录中的位置对所需的位置进行计算

使用已经具有另一个onClick的表行的onClick对组件进行重定向

2 个答案: