如何在React中让AgGrid指定列整行可点击并跳转至新表格？

1. 修改原表格，为Symbol列添加可点击交互 #

AgGridReact需要通过cellRenderer自定义单元格内容，才能实现点击跳转。下面提供两种实现方式：

方式一：使用NavLink（react-router-dom）

import { NavLink } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-balham.css';

function DataInfo() { 
  const [rowData, setRowData] = useState([]);  

  const columns = [ 
    { 
      headerName: "Symbol", 
      field: "symbol",
      // 自定义单元格渲染，生成可跳转的链接
      cellRenderer: (params) => {
        return <NavLink to={`/symbol/${params.value}`}>{params.value}</NavLink>;
      }
    }, 
    { headerName: "Name", field: "name" }, 
    { headerName: "Industry", field: "industry" }  
  ];  

  useEffect(() => { 
    fetch('http://localhost:8080/all') 
      .then(res => res.json())
      .then(data => setRowData(data))
  }, []);

  return ( 
    <div className="DataInfo"> 
      <div 
         className="ag-theme-balham" 
         style={{ height: "300px", width: "600px" }} 
      > 
          <AgGridReact
            columnDefs={columns}  
            rowData={rowData}  
          /> 
      </div> 
    </div> 
  )
};  

方式二：使用useNavigate（react-router v6+）

import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-balham.css';

function DataInfo() { 
  const [rowData, setRowData] = useState([]);  
  const navigate = useNavigate();

  const columns = [ 
    { 
      headerName: "Symbol", 
      field: "symbol",
      cellRenderer: (params) => {
        return (
          <span 
            style={{ cursor: 'pointer', color: '#165DFF', textDecoration: 'underline' }}
            onClick={() => navigate(`/symbol/${params.value}`)}
          >
            {params.value}
          </span>
        );
      }
    }, 
    { headerName: "Name", field: "name" }, 
    { headerName: "Industry", field: "industry" }  
  ];  

  useEffect(() => { 
    fetch('http://localhost:8080/all') 
      .then(res => res.json())
      .then(data => setRowData(data))
  }, []);

  return ( 
    <div className="DataInfo"> 
      <div 
         className="ag-theme-balham" 
         style={{ height: "300px", width: "600px" }} 
      > 
          <AgGridReact
            columnDefs={columns}  
            rowData={rowData}  
          /> 
      </div> 
    </div> 
  )
};  

2. 实现详情页面，接收参数并渲染数据 #

创建详情页面组件，通过useParams获取URL中的symbol参数，再请求对应数据渲染表格：

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-balham.css';

function SymbolDetail() {
  const { symbol } = useParams();
  const [detailData, setDetailData] = useState([]);

  useEffect(() => {
    if (symbol) {
      // 根据点击的symbol请求对应数据
      fetch(`http://localhost:8080/detail/${symbol}`)
        .then(res => res.json())
        .then(data => setDetailData(data))
        .catch(err => console.error('获取详情数据失败:', err));
    }
  }, [symbol]);

  // 根据实际返回的数据结构定义列
  const detailColumns = [
    { headerName: "指标名称", field: "indicatorName" },
    { headerName: "指标值", field: "indicatorValue" },
    // 其他自定义列...
  ];

  return (
    <div className="SymbolDetail">
      <h2>{symbol} 详情</h2>
      <div className="ag-theme-balham" style={{ height: '300px', width: '600px' }}>
        <AgGridReact columnDefs={detailColumns} rowData={detailData} />
      </div>
    </div>
  );
}

export default SymbolDetail;

3. 配置路由 #

在路由根组件中添加页面路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import DataInfo from './DataInfo';
import SymbolDetail from './SymbolDetail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<DataInfo />} />
        <Route path="/symbol/:symbol" element={<SymbolDetail />} />
      </Routes>
    </Router>
  );
}

关键说明 #

• AgGrid列本身不支持直接绑定点击事件，必须通过cellRenderer自定义单元格内容才能实现交互。
• 确保react-router依赖已安装，路由配置正确，参数能被详情页正常获取。

内容的提问来源于stack exchange，提问作者dangoqut132