Question

如何在ag-grid中用react-router-dom替换一个。它正在重新加载页面，而不是假装是单个页面应用程序。

我已经尝试过了，但是没有用

cellRenderer:  (params)=> {
  return <Link to={`/?info=${params.data.Id}`}>"+{params.value}+"</Link>,

是否有可能我们可以使用Link代替

cellRenderer:  function(params){
  return "<a href='/?info=" + params.data.Id+ "'>"+params.value+"</a>";},

使用链接时会引发错误：

错误：ag-Grid：当网格位于中间时，无法使网格绘制行绘制行。您的代码可能称为Grid API方法，而网格处于渲染阶段。为了克服这个问题，将API调用放入超时，例如代替api.refreshView（），调用 setTimeout（function（）{api.refreshView（），0}）。看看你的哪一部分导致刷新的代码检查此堆栈跟踪。

stacktrace中的错误指向下面的代码，但是使用element可以正常工作：

===> GetAPI（）{var url = xxxxxxxxxxx; axios.get（url）.then（response => {if（response.status == 200）{this.setState（{患者： response.data，正在加载：false}）; .catch（e => console.log（'Error 在获取费用清单时：位于Listing / index.js>错误：“，e.message，” \ n 对于用户：'，this.props.auth.user.email））}。

Answer 1

我很偶然地偶然发现了该解决方案，但是如果您将reactNext={true}作为AgGridReact的支持，则您的第一个解决方案将与cellRendererFramework一起使用。

      <AgGridReact
        reactNext={true}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        rowData={tableData}
      >
      </AgGridReact>

然后在您的columnDefs对象中添加此属性，

cellRendererFramework: (params) => {
  return <Link to={`/?info=${params.data.Id}`}>"+{params.value}+"</Link>,

显然，在Ag网格文档中，他们说reactNext中包含的功能最终将被合并到稳定的源代码中，但尚未。

Answer 2

即使我也遇到过类似的问题。我解决问题的方法是处理单元格单击事件。在单元格内单击事件内部，我检查了它来自哪一列，并进行了props.history.push。

onCellClicked: (events) => {
    if(events && events.column && events.column.colDef.field === "accountId") {
        props.history.push(`/${events.value}`);
    }
}

在ag-grid react中添加react-router-dom链接

2 个答案: