javascript - React Router 将参数从表行传递给 browserHistory

Question

我正在实现 React Router，以便在单击任何表行(每一行都是用户/客户)时从搜索结果表链接到单独的配置文件组件。尝试使用 Link 格式化表格是一场噩梦，所以我在每个表格行的 onClick 处理程序中使用 browserHistory.push()。

问题:我需要根据单击的唯一行呈现配置文件，并且我尝试将参数传递给 browserHistory 但运气为零。要么找不到该组件，要么它只是访问 /tools/customer-lookup/profile。

编辑:已更新以添加处理函数，然后调用 browserHistory.push()

路由器设置:

<Provider store={Store}>
    <Router history={browserHistory}>
        <Route path="/tools/customer-lookup" component={CustomerLookupApp} />
        <Route path="/tools/customer-lookup/profile/:id" component={CustomerProfile} />
    </Router>
</Provider>

表行:(没有将 { id } 传递给 browserHistory.push())

constructor(props) {
  super(props);

  this.pushToUrl = this.pushToUrl.bind(this);
  this.state = {
    selectedRow: []
  };
};

render() {
    let tableData = this.props.data.map(customer => {
      return (
        <tr onClick={this.pushToUrl(`/tools/customer-lookup/profile/${customer.address}`)} id="customer-data-row">
          <td>{customer.firstname}</td>
          <td>{customer.lastname}</td>
          <td>{customer.birthdate}</td>
          <td>{customer.city}</td>
          <td>{customer.state}</td>
          <td>{customer.address}</td>
        </tr>
      );
    });

pushToUrl(url) {
    console.log(url);
  }

tr onClick 处理程序似乎为每一行数据调用一次，这毫无意义。以下是来自 onClick 的处理程序的 console.logs:

Answer 1

您可以按照这些思路做一些事情。传递您打算导航到的 url。

goTo(url) {
    browserHistory.push(url)
}

render() {
    let tableData = this.props.data.map(customer => {
      return (
        <tr onClick={this.goTo.bind(this, `/tools/customer-lookup/profile/${customer.id}`)} id="customer-data-row">
          <td>{customer.firstname}</td>
          <td>{customer.lastname}</td>
          <td>{customer.birthdate}</td>
          <td>{customer.city}</td>
          <td>{customer.state}</td>
          <td>{customer.address}</td>
        </tr>
      );
    });