如何使用AgGrid的cellRenderer实现React路由跳转？

原代码的问题： #

• 用原生document.createElement创建的<a>节点直接插入React组件返回值，React虚拟DOM不支持直接渲染原生DOM节点，导致渲染异常。
• goToDetails函数定义在return语句之后，永远不会被执行。
• 未正确集成React Router的路由跳转方法。

修复后的代码（分React Router版本） #

React Router v5 版本

import React from 'react';
import { useHistory } from 'react-router-dom';

export default (props) => {
  const history = useHistory();

  const goToDetails = () => {
    // 替换为你的目标路由，这里以详情页为例
    history.push(`/details/${props.data.id}`);
  };

  return (
    <a 
      href="#" 
      style={{ color: '#000000', cursor: 'pointer' }}
      onClick={(e) => {
        e.preventDefault();
        goToDetails();
      }}
    >
      {props.value}
    </a>
  );
};

React Router v6 版本（v6用useNavigate替代useHistory）

import React from 'react';
import { useNavigate } from 'react-router-dom';

export default (props) => {
  const navigate = useNavigate();

  const goToDetails = () => {
    // 替换为你的目标路由
    navigate(`/details/${props.data.id}`);
  };

  return (
    <a 
      href={`/details/${props.data.id}`} 
      style={{ color: '#000000', cursor: 'pointer' }}
      onClick={(e) => {
        e.preventDefault();
        goToDetails();
      }}
    >
      {props.value}
    </a>
  );
};

注意事项 #

• 确保AgGrid所在的组件被<BrowserRouter>（或React Router提供的其他Router组件）包裹，否则路由钩子会抛出上下文不存在的错误。
• 可以把href属性设为实际的路由地址，这样即使JavaScript失效，用户也能看到跳转目标，同时通过e.preventDefault()阻止默认的页面跳转，改用React Router的方法实现单页跳转。

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