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

在单击某个图标后，如何将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;

从“React”导入React；
导入“../style/icon panel.css”；
从“../icons/Login.svg”导入{ReactComponent as Login}；
从“../icons/Register.svg”导入{ReactComponent as Register}；
从“../icons/Tender.svg”导入{ReactComponent as Tender}；
从“../icons/Cash.svg”导入{ReactComponent as Cash}；
函数IconPanel（）{
返回(
);
}
导出默认IconPanel；

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

为组件添加onClick事件。例如：

history.push（'/login'）}/>

将svg包装在

或

history.push（'/login'）}>

将svg渲染为图像

history.push（'/login'）}/>

---

您是否尝试过只添加一个

onClick

事件？还是将其包装在

元素中？（或

如果您使用的是react路由器）我按相反的顺序执行此操作，将标记放置在react组件中。我不想按你说的顺序做。谢谢你的回答，你是对的。

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