单击 svg 元素时反应重定向答案

【问题标题】：React redirect on click of svg element单击 svg 元素时反应重定向
【发布时间】：2019-06-19 14:57:28
【问题描述】：

我有一个 d3 和 SVG 重的单页 React 应用程序，当用户在我的一个页面上单击 svg rect 时，我希望能够从一个页面重定向到另一个页面。我熟悉 react-router-dom 库中的 this.props.history.push() 以及 <Link> 组件，但是在这种情况下，这些似乎都没有帮助。

此处相关的 svg 元素位于我的图形组件的深处，该组件位于执行所有路由的前端主 App.js 文件下方的 3-4 个孩子，并且当我在我的带有 svg 的组件，道具上没有 history 对象。我不确定这里是否需要一个可重现的例子，因为我只需要方向。

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

编辑： 显然这是错误的，但我尝试在点击处理程序中返回 Redirect 组件，但它不起作用：

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

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

Edit2: 我应该将rect 元素放在svg 中的组件内吗？这有可能吗？

【问题讨论】：

标签： reactjs d3.js svg react-router

【解决方案1】：

您可以将 react-router 中的 history 属性添加到组件中，方法是使用 withRouter 包装它。只需确保安装您的组件的任何内容都使用包装版本（通常仅通过导出包装组件）。

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);

【讨论】：