Реагировать на перенаправление компонента с помощью onClick строки таблицы, в которой уже есть другой onClick

Question

У меня есть строка таблицы, в которой уже есть onClick, который используется для отправки данных в API для отображения нового содержимого. В настоящее время у меня есть этот рендеринг API на целевую страницу. Однако я хотел бы, чтобы данные отображались на отдельной странице / пути.

Хочу ли я использовать Redirect, Link, другой 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>
   )

Вот моя главная страница класса. Я хотел бы, чтобы 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}
    />

Вот мой 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, чтобы сделать некоторые расчеты того, куда вам нужно идти, основываясь на том, где вы находитесь в истории маршрутизатора.