Reactjs 链接中的发送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>
            )
          })}

{categories.map（（类别，索引）=>{
返回(
{index}
{category.name}
50
编辑
删除
)
})}

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

您需要执行以下操作：

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

---

如果您需要发送一个category

id

，那么一个非常简单的方法就是将其作为路径URL的一部分发送

在

路由器中创建一条处理
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变量

{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/ID/${category._id}`}}>Edit</Link></td>
                <td><Button variant={'danger'} onClick={deleteCategoryHandler} data-id={category._id}>Delete</Button></td>
              </tr>
            )
          })}

如果我理解正确，我需要从componen中的react routed dom导入useLocation？是的，
import{useLocation}从'react router dom'
谢谢，它可以工作。我在导入useLocation时遇到了问题，但我已修复。有必要将react router dom更新为5.2
const { id } = useParams();

{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/ID/${category._id}`}}>Edit</Link></td>
                <td><Button variant={'danger'} onClick={deleteCategoryHandler} data-id={category._id}>Delete</Button></td>
              </tr>
            )
          })}

import {useParams} from "react-router-dom";
const YourComponent = (props) => {
let  { ID } = useParams();
...
}