Add react-router-dom Link in ag-grid react

Question

How can I replace a with of react-router-dom, in ag-grid. It is making the page reload instead of pretending to be a single page application.

I have tried with this but it doesn't work

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

Is there a possibility that we can use Link instead of

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

when using Link it is throwing the Error:

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.

The error in stacktrace points to the code below, But with element it works fine:

===> 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

I stumbled upon this solution out of dumb luck but if you add reactNext={true} as a prop to AgGridReact, your first solution will work with cellRendererFramework.

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

Then in your columnDefs object add this attribute,

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

Apparently in the Ag grid documentation, they said features included in reactNext will eventually be merged into the stable source code, but it hasn't yet.

Answer 2

Even I faced similar issue. The way I solved it was by handling Cell Clicked Event. Inside Cell Clicked Event I checked which column it is coming from and did props.history.push.

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