React中使用HashRouter时，如何通过Link组件实现导航栏文件下载？

问题根源在于Link组件是为客户端路由跳转设计的，在HashRouter模式下，它会自动给to属性的值加上#前缀，导致最终请求的路径变成/#/myfile.txt，而你要下载的文件实际在根路径/myfile.txt下，所以会提示文件找不到。

下面提供两种可行的解决方案：

方案一：在Link的点击事件中手动触发下载 #

通过阻止Link默认的路由跳转行为，手动创建临时a标签来触发下载：

<Link
  key={section.name}
  to={section.link}
  onClick={(e) => {
    if (section.link === '/myfile.txt') {
      e.preventDefault(); // 阻止路由跳转
      const downloadLink = document.createElement('a');
      downloadLink.href = section.link; // 直接指向public下的文件路径
      downloadLink.download = 'myfile.txt';
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    }
  }}
>
  {section.name}
</Link>

方案二：区分路由项和下载项（更清晰） #

对下载项直接使用a标签（保持和Link一致的样式），路由项继续用Link，这样不用手动处理#前缀：

{sections.map(section => {
  if (section.link === '/myfile.txt') {
    return (
      <a
        key={section.name}
        href={section.link}
        download="myfile.txt"
        className="nav-link" // 替换成你Link组件使用的样式类
      >
        {section.name}
      </a>
    );
  }
  return (
    <Link key={section.name} to={section.link}>
      {section.name}
    </Link>
  );
})}

这两种方案都能绕开HashRouter对路径的修改，直接请求public目录下的文件，实现正常下载。

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