反应并导航到所选项目

Question

我有一个我正在向用户显示的用户表。他们点击一行，我想导航到一个组件来显示细节。

  <tbody>
    {this.state.clients.map(client => (
      <tr className="tableRow" onClick={() => this.handleSelection(client.id)}>
        <td>{client.name}</td>

我的路线设置如下：

<Route path="/client/:clientId" component={Client} />

所以在行中，我有一个onClick事件，它调用一个函数，传递所选的参数。这是功能：

  handleSelection(clientId) {
    this.props.history.push(`/client/${clientId}`);
  }

然后，在目标组件的构造函数中，我只记录所选的id，它将被传递给api以加载数据：

console.log('Loading clientId...', this.props.match.params.clientId);

但这似乎是错误的。我得到了正确的ID，但是......我这样做了吗？有没有更好/更安全的方式来做我正在做的事情？

Answer 1

另一个选择就是在每个TD中使用单独的Link标签：

<td><Link to={`/client/${client.id}`}>{client.name}</Link></td>

这也更容易获得，因为视力受损的用户可能无法触发onclick事件。

Answer 2

如果你正在使用react-router-dom它有一个Link组件

{this.state.clients.map(client => (
  <Link to={`/client/${clientId}`} >
    <tr className="tableRow">
      <td>{client.name}</td>
  </Link>

最好在表行上使用链接而不是onClick来获取可访问性。如果您没有使用react-router-dom，您可以从查看源代码推出自己的版本 - https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js

通过以这种方式工作，当人们命令点击链接以在新选项卡中打开它时，它将正常运行。

对于您获取params的路径，如果您不希望组件处理属性中的匹配，您可以执行以下操作：

<Route path="/client/:clientId" children={({ match }) => (<Client {...match.params} />)} />