Question

我有一个页面重载d3和SVG的React App，当用户单击我页面之一上的npm install autorest -g时，我希望能够从一个页面重定向到另一页面。我对svg rect以及react-router-dom库中的this.props.history.push()组件都很熟悉，但是在这种情况下，这两者似乎都不起作用。

这里相关的svg元素位于我的图形组件的深处，该组件比进行所有路由的前端主<Link>文件（当我运行{{1 }}在包含svg的组件中，道具上没有App.js对象。我不确定这里是否需要可复制的示例，因为我只需要指导。

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

编辑：显然，这是错误的，但是我试图在点击处理程序中返回一个console.log(this.props)组件，但它不起作用：

history

Edit2 ：我应该将Redirect元素放在svg的组件内部吗？那有可能吗？

Answer 1

您可以使用history将react-router中的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);

单击svg元素时反应重定向

1 个答案: