当我在我的网址localhost:3000/contracts/members
上时,我看到类似这样的内容:
问题:当我点击其中一行(例如会员ID为3564的第3行)时,如何进行此操作我将转到网址localhost:3000/contracts/contract?id=3564
?
显示上表的My Component类代码如下所示:
const SearchBarAndResults = React.createClass({
render() {
// other stuff...
<Tbody>
{_.map(memberContractsOnDisplay, (contract) => (
<Tr key={contract.member_id}
onClick={this.handleClickedRow.bind(this, contract)}>
<Td>{contract.member_id}</Td>
<Td>{contract.name}</Td>
<Td>{contract.pricing_version}</Td>
<Td>{contract.seller_type}</Td>
<Td>{contract.selling_enabled}</Td>
<Td><BillablePopUp passedProp_is_billable={contract.
is_billable}/></Td>
</Tr>
))}
</Tbody>
},
handleClickedRow(contract) {
let newURL = '/contracts/contract?id='.concat(contract.member_id);
browserHistory.push(newURL); // <=== This is changing the URL but isn't loading it
store.dispatch(getClickedOneLinkedRowAction(contract));
}
});
和我的routes.jsx
看起来像:
export default (
<Route path='/' component={App}>
<Route path='members' onEnter={onEnterMemberContracts} component={
MemberContracts} />
// What do I do here to load the Contract component everytime a user
// hits /contract?id=3564 or a different id?
<Route path='contract' component={Contract} />
</Route>
);