如何根据用户输入路由到React中的动态URL

时间:2016-04-27 01:11:18

标签: javascript reactjs react-router

当我在我的网址localhost:3000/contracts/members上时,我看到类似这样的内容: enter image description here

问题:当我点击其中一行(例如会员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>
);

0 个答案:

没有答案