React Material-UI表格内CSV下载按钮跳转路径错误问题排查

• 问题根因：react-router-dom提供的Link组件仅用于处理React应用的内部路由跳转，传入的to属性会被默认识别为相对路径，自动拼接到当前页面的路由前缀后，因此无法直接用于跳转外部文件链接、触发下载。
• 解决方案：直接使用原生<a>标签实现下载即可，你可以选择两种写法适配Material-UI的组件规范：
  1. 用<a>标签包裹Button组件，示例代码：

  <TableCell>
    <a 
      href={filePath} 
      target="_blank" 
      rel="noopener noreferrer" 
      download
    >
      <Button>
        Download CSV
      </Button>
    </a>
  </TableCell>
  

  2. 更推荐的写法：直接用Material-UI Button的component属性，将按钮渲染为<a>标签，减少DOM层级：

  import { Button, TableCell } from '@mui/material';
  
  <TableCell>
    <Button
      component="a"
      href={filePath}
      target="_blank"
      rel="noopener noreferrer"
      download
    >
      Download CSV
    </Button>
  </TableCell>
  

• 参数说明：
  • target="_blank"为可选配置，作用是在新标签页触发下载，不会跳走当前操作页面
  • rel="noopener noreferrer"为安全配置，可避免跨域场景下的安全风险
  • download属性会强制浏览器触发文件下载，而不是直接在当前页面打开CSV文件预览，不需要可以删除
• 注意事项：只有跳转当前应用的内部路由（如/user/list、/dashboard这类你自己配置的路由路径）时，才需要使用Link组件。

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