Reactjs 单击svg元素时响应重定向

我有一个使用d3和SVG的单页React应用程序，我希望当用户单击我的一个页面上的

SVG rect

时，能够从一个页面重定向到另一个页面。我熟悉react router dom库中的

this.props.history.push（）

以及

组件，但是这两个组件在本例中似乎都没有帮助

这里的svg相关元素深入到我的一个绘图组件中，它是前端执行所有路由的主

App.js

文件的3-4个子级，当我在使用svg的组件中运行

console.log（this.props）

时，在props上没有

history

对象。我不确定这里是否需要一个可复制的例子，因为我只需要方向

简而言之，我不知道应该在与我的svg rect关联的点击功能中加入什么，以便在我的应用程序中启用重定向。如果您对此有任何想法，我们将不胜感激

编辑：显然这是错误的，但我试图在点击处理程序中返回一个

重定向组件，但它不起作用：

    ...
    ...
    function handleMouseClick() {
        console.log('clicked')
        return <Redirect to='/stats' />;
    } 

    myRect.on('click', handleMouseClick)
    ...

。。。
...
函数handleMouseClick（）{
console.log（'clicked'）
返回；
} 
myRect.on（'click'，HandleMouse click）
...

Edit2:我是否应该将
rect
元素放在svg的组件内部？这可能吗？
您可以通过使用
withRouter
将
历史记录
道具从
react router
添加到组件中。只要确保安装组件的任何组件都使用包装版本（通常只导出包装组件）

从“React”导入React；
从“react router”导入{withRouter}；
类MyComponent扩展了React.Component{
render（）{
返回(
this.props.history.push（'/newpage'）}>
点击我
);       
}
}
使用路由器导出默认值（MyComponent）；

import React from 'react';
import { withRouter } from 'react-router';

class MyComponent extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.history.push('/newpage')}>
        Click me
      </button>
    );       
  }
}

export default withRouter(MyComponent);