如何在React.js中为图片添加路由？Logo跳转仪表盘问题求助

看起来你遇到的问题主要和原生<a>标签在React单页应用中的适配以及容器样式设置不当有关，我来帮你一步步修复：

1. 替换原生<a>标签为React Router的<Link>组件 #

如果你的项目用的是React Router（绝大多数React单页应用都会用），原生<a>标签会触发整页刷新，不仅破坏SPA的体验，还可能和路由配置冲突，导致跳转异常。我们应该用React Router提供的<Link>组件来实现单页内跳转：

首先在组件顶部导入Link：

import { Link } from 'react-router-dom';

然后把原来的<a>标签替换成<Link>：

{collapsed && <Link to="/dashboard"> <img src={minLogo} alt='Logo' /> </Link> }

2. 修复容器样式的问题 #

你给.header-logo设置了height: 0，这会让容器高度为0，图片要么被挤压变形，要么完全没有可点击的区域，这也是点击无效的核心原因之一。我们需要调整这个样式：

把height: 0改成合适的高度（比如和Header的高度一致，假设是60px），同时可以添加布局样式让图片居中：

<div className='header-logo' style={{ width: collapsed ? 80 : 200, height: 60, display: 'flex', alignItems: 'center' }}>

修改后的完整代码 #

<Header className='header' style={{ position: 'fixed', width: '100%' }}> 
  <div className='header-logo' style={{ width: collapsed ? 80 : 200, height: 60, display: 'flex', alignItems: 'center' }}> 
    {collapsed && <Link to="/dashboard"> <img src={minLogo} alt='Logo' /> </Link> } 
    { !collapsed && <span>&nbsp;</span> } 
  </div> 
  <Icon className="trigger" type={collapsed ? 'menu-unfold' : 'menu-fold'} onClick={this.toggleSideBar} /> 
  <div style={{ display: 'inline-block', float: 'right' }}> 
    <Dropdown overlay={menu} placement="bottomRight"> 
      <Avatar icon='user' /> 
    </Dropdown> 
  </div> 
</Header>

额外排查点 #

• 确认你的路由配置中已经正确注册了/dashboard对应的组件，比如：

  <Route path="/dashboard" element={<Dashboard />} />
  

• 检查minLogo的路径是否正确，确保图片能正常渲染出来（可以在浏览器开发者工具中查看图片元素的src是否有效）

内容的提问来源于stack exchange，提问作者Pavan Kusunuri