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

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>";},

使用链接时会抛出错误:

Error: ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.

堆栈跟踪中的错误指向下面的代码，但使用元素它可以正常工作:

===> GetAPI(){ var url = xxxxxxxxxxx; axios.get(url).then(response => { if (response.status == 200) { this.setState({ patients: response.data, loading: false }); } }) .catch(e => console.log('Error While Fetching Fee List: at Listing/index.js > Error: ', e.message,'\n for user : ',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 grid 文档中，他们表示，reactNext 中包含的功能最终将合并到稳定的源代码中，但目前还没有。