在AntD的table里面实现点击按钮跳转路由

AntD Table组件中实现点击按钮跳转路由的方法

最新推荐文章于 2023-10-09 15:01:29 发布

原创最新推荐文章于 2023-10-09 15:01:29 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript

AntDesign 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种在Ant Design（AntD）Table组件内实现点击按钮跳转到指定路由并传递参数的方法。第一种方法使用`useHistory` hook，通过调用`history.push`来实现跳转。第二种方法则利用`Link`组件直接创建一个链接到目标路由。这两种方法都是React Router DOM库中的常见实践。

在AntD的table组件的操作栏里面，实现点击按钮跳转到路由指定路由，并携带参数

第一种

// 引入
import { useHistory } from "react-router-dom";
// 处理逻辑
let history = useHistory();
const onDetail = (row: ITableNode) => {
   let id: string = row.key
    history.push(`/havePowerDetail/${id}`)
  }
{
      title: '操作',
      key: 'action',
	  render: (row: ITableNode) => (
	      <Button type="link" onClick={() => {
	               onDetail(row)
	       }}>查看详情</Button>
  )
}

第二种（推荐）

import { Link } from "react-router-dom";

{
      title: '操作',
      key: 'action',
      render: (row: ITableNode) => (
        <Link to={`/havePowerDetail/${row.key}`}>
          编辑
        </Link>
      )
    }