ルータがテーブル行からbrowserHistoryにパラメータを渡す

Question

React Routerを実装して、テーブル行をクリックするたびに検索結果の表を別のProfileコンポーネントにリンクします（各行はユーザー/顧客）。 Linkでテーブルを書式設定しようとすると悪夢的なので、各テーブル行のonClickハンドラ内でbrowserHistory.push()を使用しています。

問題：クリックした一意の行に基づいてプロファイルをレンダリングする必要があります。browserHistoryにパラメータを渡してみました。コンポーネントが見つからないか、または/tools/customer-lookup/profileを訪問しただけです。

EDIT：

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

表の行：：（browserHistory.push()に渡される{ id }なし）

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

その後、browserHistory.push()

ルータセットアップを呼び出すハンドラ関数を追加して更新しました

tronClickハンドラが表示されますデータの行ごとに1回呼び出されることになり、ゼロになります。ここで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> 
    ); 
    });