在d3和react.js的帮助下，我能够创建d3层次树

我想实现的是，在每个节点文本（如约翰，卢克，...）点击它应该路由到每个点击文本的详细页面。

nodes
    .append("text")
    .attr("font-size", "17px")
    .attr("text-anchor", "start")
    .text(function (d) {
        return `${d.data.name}`
    })
    .on("click", function (event, d) {
        this.props.history.push(`/detail/${d.id}`);
});

构造器

constructor(props) {
    super(props);
    console.log(this.props)                  // there is history in props
    this.state = {
      isClicked: ""
      };
    this.geGraph = this.getGraph.bind(this);  // function where graph code presents

单击节点文本后，出现错误。

Uncaught TypeError: Cannot read properties of undefined (reading 'history')

同样，当我调试this.props.history.push行时，this中没有props。
试图遵循这个How to use React Router with d3.js Graphs to redirect to another screen。仍然得到同样的问题。当我试图去箭头功能

.on("click", (event, d) => this.props.history.push(`/detail/${d.id}`))

这次道具出问题Uncaught TypeError: Cannot read properties of undefined (reading 'props')
我在<Route history={createBrowserHistory()}/>和import { createBrowserHistory } from "history";中添加了历史，并从import { withRouter } from 'react-router-dom';导入了export default withRouter(MyGraph)。

我使用的是路由器版本"react-router-dom": "^4.3.1"和基于类的组件（带有typescript）。

如何解决此问题。
提前感谢!