在ag网格react中添加react路由器dom链接

Question

如何在ag网格中用react路由器dom的替换a。它正在重新加载页面，而不是假装是一个单独的页面应用程序。

我试过这个，但它不起作用

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：当网格位于中间时，无法获取网格来绘制行的绘图行。您的代码可能调用了一个网格API方法，而网格处于渲染阶段。为了克服这一问题，请将API调用放入超时，例如调用setTimeout(function((｛api.refreshView((，0｝(导致刷新的代码检查此堆栈。

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

＝＝>GetAPI((｛var url=xxxxxxxxxxx；axios.get(url(.then(response＝>｛if(response.status＝＝200(｛this.setState(｛patients:response.data，正在加载：false｝(；｝｝(。catch(e=>console.log('错误获取费用列表时：在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

甚至我也面临类似的问题。我解决问题的方法是处理Cell Clicked Event。在Cell Clicked Event中，我检查了它来自哪一列，并执行了props.history.push。

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