添加带有按钮的列，该按钮有助于路由到材料表反应中的新页面（单击时）答案

【问题标题】：Add column with a button which helps to route to a new page (when clicks) in material-table react添加带有按钮的列，该按钮有助于路由到材料表反应中的新页面（单击时）
【发布时间】：2020-11-14 12:06:11
【问题描述】：

目前，我正在使用 covid 19 API 开发一个基于反应的个人项目。在那里，我使用材料表将国家/地区显示为表格记录。我需要添加一个带有按钮的列，该按钮有助于在用户单击时路由到新页面（具有相关国家/地区详细信息的组件）。非常感谢任何帮助。

componentDidMount() {
  axios
    .get('API URL')
    .then((res) => {
      this.setState({
        countries: res.data,
      });
    })
    .catch((err) => {
      console.log(err);
    });
}

render() {
  return (
    <div>
      <div className='c-overview-header' style={{ marginTop: 30 }}>

      <div className='country-tbl' style={{ marginTop: 20, height: 20 }}>
        <Container xs={12} md={8}>
          <Row>
            <Col>
              <MaterialTable
                columns={[
                  {
                    title: 'Flag',
                    field: 'flag',
                    filtering: false,
                    sorting: false,
                    render: (rowData) => (
                      <img
                        style={{ width: '50%', height: '50%' }}
                        src={rowData.countryInfo.flag}
                        alt={rowData.country}
                      />
                    ),
                  },

                  { title: 'Country Name', field: 'country' },
                  { title: 'Continent', field: 'continent' },
                  { title: 'Total Cases', field: 'cases', type: 'numeric' },
                  { title: 'Total Deaths', field: 'deaths', type: 'numeric' },
                ]}
                data={this.state.countries}
                options={{
                  filtering: true,
                  sorting: true,
                  actionsColumnIndex: -1,
                }}
                title=''
              />
            </Col>
          </Row>
        </Container>
      </div>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs axios material-table

【解决方案1】：

你可以使用action prop 如下

actions = {[
    {
      icon: 'info',
      tooltip : 'anything you want to display when hover over',
      onClick: (event) => window.location.href = '/path'
    }
 ]}

【讨论】：

【解决方案2】：

您可以使用actions 属性，如下所示：

<MaterialTable
  title="Simple Action Preview"
  columns={[
    { title: "Name", field: "name" },
    { title: "Infected", field: "infected" }
  ]}
  data={[
    {
      name: "country1",
      infected: 300
    },
    {
      name: "country2",
      infected: 100
    }
  ]}
  actions={[
    {
      icon: "info",
      tooltip: "More info",
      onClick: (event, rowData) => {
        history.push(`/details/${rowData.name}`);
      }
    }
  ]}
/>

https://codesandbox.io/s/material-table-react-router-1hhre?file=/src/Table.jsx

【讨论】：

非常感谢您的努力和回答。使用 history.push 或 windows.location.href 是否是一个好习惯，因为两者都完全刷新页面？
history.push 我的意思是router-router-dom's。