要将列链接添加到Material-UI表,并使用列链接ID重定向到摘要详细页,可以按照以下步骤进行操作:
<Link>
组件或其他适合的组件来创建链接。下面是一个示例代码,演示如何实现上述功能:
import React from 'react';
import { Link } from 'react-router-dom';
import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
const data = [
{ id: 1, name: 'Item 1', description: 'Description 1' },
{ id: 2, name: 'Item 2', description: 'Description 2' },
{ id: 3, name: 'Item 3', description: 'Description 3' },
];
const TableComponent = () => {
return (
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Name</TableCell>
<TableCell>Description</TableCell>
<TableCell>Actions</TableCell> {/* 自定义列 */}
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.description}</TableCell>
<TableCell>
<Link to={`/details/${row.id}`}>View Details</Link> {/* 列链接 */}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
};
export default TableComponent;
在上述示例中,我们创建了一个简单的表格组件,其中包含了一个自定义的列链接。通过使用<Link>
组件,我们将列链接的URL与/details/:id
路径进行关联,其中:id
是动态的路由参数,代表列链接的ID。
在摘要详细页的组件中,可以通过React Router的useParams
钩子来获取到路由参数的值,然后根据该值从数据数组中找到对应的行数据进行展示。
请注意,上述示例中的路由部分未给出具体实现,需要根据项目所使用的路由库进行相应的配置和处理。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云数据库(TencentDB)。您可以访问腾讯云官网了解更多关于这些产品的详细信息和使用指南。
腾讯云服务器(CVM)产品介绍链接:https://cloud.tencent.com/product/cvm 腾讯云数据库(TencentDB)产品介绍链接:https://cloud.tencent.com/product/cdb
领取专属 10元无门槛券
手把手带您无忧上云