时间戳

首页 > 解决方案 > 如何在链接 React 中发送 id 类别？

reactjs - 如何在链接 React 中发送 id 类别？

问题描述

我有一个页面，我用这个代码显示所有类别

{categories.map((category, index) => {
            return(
              <tr key={index}>
                <th scope="row">{index}</th>
                <td>{category.name}</td>
                <td>50</td>
                <td><Link to={{pathname: `/categories/edit/`}}>Edit</Link></td>
                <td><Button variant={'danger'} onClick={deleteCategoryHandler} data-id={category._id}>Delete</Button></td>
              </tr>
            )
          })}

但是当我创建组件编辑类别时，我需要使用 id 发送。哪个ID和名字更好？

标签： reactjsreact-routerreact-router-dom

解决方案

如果您需要发送 category id，那么一种非常简单的方法是将其作为路径 URL 的一部分发送。

Router在您的那句柄中创建一条路线path="/categories/edit/:id"。然后在映射时为链接构造适当的路径。

{categories.map((category, index) => {
  return(
    <tr key={index}>
      <th scope="row">{index}</th>
      <td>{category.name}</td>
      <td>50</td>
      <td>
        <Link to={{pathname: `/categories/edit/${category.id}`}}>
          Edit
        </Link>
      </td>
      <td>
        <Button
          variant={'danger'}
          onClick={deleteCategoryHandler}
          data-id={category._id}
        >
          Delete
        </Button>
      </td>
    </tr>
  )
})}

在接收路由的组件上，id可以使用来自的useParams反应钩子通过匹配对象访问参数。react-router-dom

const { id } = useParams();

推荐阅读