如何将 <Link> react-router 添加到 Material-table？答案

【问题标题】：How to add <Link> react-router to Material-table?如何将 <Link> react-router 添加到 Material-table？
【发布时间】：2019-11-05 00:45:15
【问题描述】：

我使用的material-table库是一个基于Material-UI Table的Datatable。

数据表具有可编辑的属性，并在同一个表中添加一条新记录，但我不想在同一个表中这样做。

我需要使用一个按钮，因为我希望它打开一个材质 UI 菜单。但是，我不知道如何添加链接或类似内容。

我使用以下代码 sn-p 进行了尝试，但它告诉我 Link 没有定义，即使它确实很重要

import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';
import EditIcon from '@material-ui/icons/Edit';
import { IconButton } from '@material-ui/core';
import  axios  from 'axios';
import { Link} from 'react-router-dom';

export default function TableProducts() {

const url='/api/products';

const [product, setProduct]= useState({Products:[]});


 useEffect(()=>{
    const getProduct=async()=>{
            const response =await axios.get(url);
            setProduct(response.data);
    }
    getProduct();
},[]);

  return (

<MaterialTable
      title="Products"
      columns={[
        {title: 'id',field: 'id', type: 'numeric', hidden:'false'},
        { title: 'nameproduct',field: 'nameproduct', },
        { title: 'description', field: 'description' },
        { title: 'price', field: 'price' },
      ]} 
      data={product.Products}
      options={{
        filtering: true,
        sorting: true
      }}
      actions={[
        {
          icon: 'edit',
          tooltip: 'Edit ',
          onClick: () => 
            <Link to={`/product/${data._id}/edit`}>Edit</Link> 

        }
      ]}
      />

    );
  }

我想完成这样的事情

                <Link
                    to={`/product/edit/${product.id}`}
                    className="btn btn-success mr-2">Editar
                </Link>

【问题讨论】：

你的代码有点欠缺。很难判断您是想在每个表格行上创建一个新链接，还是什么。
您确定要导入链接吗？
@Rob 是的，我进行了导入，从 'react-router-dom' 导入 {NavLink, Link}；

标签： reactjs material-table

【解决方案1】：

你是否将它嵌套在一个路由器组件中，比如

<Router>
<MaterialTable ...>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>
   </div>
   </MaterialTable>
  </Router>

增加了关于合并材料表的部分。只需尝试使路由器成为根容器。

【讨论】：

但如果我使用的是桌子

【解决方案2】：

actions={[
    icon: () => <Link to='/test'><Icon /></Link>,
    tooltip: 'tip',
    onClick: (event, rowData) => 
        localStorage.setItem('selectedRowData', rowData)
    ]}

Link to='/test' --> 你想通过点击动作打开的根目录

图标 --> 可用于导入和放置的操作图标

点击 --> 在 Onclick 事件中，您将要获取的信息保存到所需的根目录

tip：记住，如果数据量大，最好用redux

【讨论】：

您能否解释一下您的回答？
使用 localStorage 或 Redux 传输数据

【解决方案3】：

不是这个

actions={[
        {
          icon: 'edit',
          tooltip: 'Edit ',
          onClick: () => 
            <Link to={`/product/${data._id}/edit`}>Edit</Link> 

        }
      ]}

这样做

actions={[
    rowData => ({
      icon: () => <Link to={`/product/${rowData._id}/edit`}>Edit(Replace with icon code)</Link>
      tooltip: 'Edit ',
      onClick: (rowData)
    })
  ]}

欲了解更多信息，请访问https://material-table.com/#/docs/features/actions

【讨论】：