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

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

问题：我需要基于单击的唯一行来渲染配置文件，并且我尝试将参数传递给零运气的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：

最佳答案

您可以按照以下方式进行操作。传递您要导航到的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>
      );
    });

关于javascript - React Router将参数从表行传递给browserHistory，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40162580/