单击 SVG 图标重定向到另一个页面答案

【问题标题】：On click on SVG icon redirection to another page单击 SVG 图标重定向到另一个页面
【发布时间】：2020-12-20 10:18:45
【问题描述】：

如何在单击某个图标后将 href 添加到 SVG 图标以重定向到另一个页面？我将 SVG 图标保存为 React 组件，但我不知道我现在需要做什么才能做到这一点。

import React from 'react';
import '../style/icon-panel.css';
import { ReactComponent as Login } from '../icons/login.svg';
import { ReactComponent as Register } from '../icons/register.svg';
import { ReactComponent as Tender } from '../icons/tender.svg';
import { ReactComponent as Cash } from '../icons/cash.svg';

function IconPanel() {
  return (
    <div id="icon-panel-id" className="icon-panel">
      <Login />
      <Register />
      <Tender />
      <Cash />
    </div>
  );
}

export default IconPanel;

【问题讨论】：

您是否尝试过仅添加onClick 事件？还是将其包装在 <a> 元素中？（或者 <Link> 如果你使用的是 react-router）
我以相反的顺序执行此操作，标签放在 ReactComponent 中。我没有按你说的顺序来做这件事。谢谢你的回答，你是对的。

标签： reactjs svg

【解决方案1】：

有几种方法可以做到这一点：

为 ReactComponent 添加 onClick 事件。例如：

<Login onClick={() => history.push('/login')} />

将 svg 包装在 <div> 或 <a> 中

 <div onClick={() => history.push('/login')}>
   <Login />
 </div>

将 svg 渲染为图像

<Image src={require('svg_path_here')} onClick={() => history.push('/login')} />

【讨论】：